JS 节点操作:尾部.头部.删除.替换.克隆元素

2017-08-22 10:08:10 Albin Wong 1391

```html
<style type="text/css">
    #content {
        width:800px;
        height:500px;
        border:solid 1px #ddd;
        margin: 0 auto;
    }
    .item{
        width:100px;
        height:100px;
        background: orange;
        float:left;
        margin-right:10px;
        margin-bottom:10px;
        border-radius:50%;
        overflow:hidden;
    }
</style>
<div>
    <button>在尾部添加元素</button>
    <button>在头部添加元素</button>
    <button>删除最后一个标签元素</button>
    <button>替换第一个元素</button>
    <button>点击克隆一个元素</button>
</div>
<div id="content"></div>
```
```javascript
    var bts = document.getElementsByTagName('button');
    var content = document.getElementById('content');
```
#### 第一个按钮的单击事件
```javascript
    bts[0].onclick = function() {
        var div = createDiv();
        //执行插入
        content.appendChild(div);
    }
```

####  第二个按钮的单击事件
```javascript
    bts[1].onclick = function() {
        //创建新元素
        var div = createDiv();
        var first = content.firstElementChild;
        var first = content.children[3];
        //执行插入
        content.insertBefore(div, first); // insert插入  before 在....之前
    }
```

#### 点击元素删除最后一个div
```javascript
    bts[2].addEventListener('click', function(){
        //获取最后一个div元素
        var last = content.lastElementChild;
        //执行删除
        content.removeChild(last);
    });
```

#### 绑定事件
```javascript
    bts[3].onclick = function() {
        //获取新的div元素也
        var div = createDiv();
        //获取第一个标签子元素
        var f = content.firstElementChild;
        //执行替换  replaceChild
        content.replaceChild(div, f);
    }
```

#### 克隆元素
```javascript
    bts[4].onclick = function() {
        //克隆元素
        // 获取第一个标签子元素 并克隆
        var newF = content.firstElementChild.cloneNode(true);//如果不加true这个参数, 只会复制标签, 加上之后会复制里面的子标签
        //执行插入
        content.appendChild(newF);
    }

function createDiv() {
        //创建一个div
        var div = document.createElement('div');//create创建element元素
        //绑定单击事件
        div.onclick = function() {
            //获取content元素
            var res = confirm('您确定要删除该元素么???');
            if(res){
                content.removeChild(this);
            }
        }
        //添加css样式
        div.style.width = '100px';
        div.style.height = '100px';
        div.style.background = 'orange';
        //添加class
        div.className = 'item';
        //创建img标签
        var img = document.createElement('img');
        //设置图片的src属性
        img.setAttribute('src', './images/'+rand(1,10)+'.jpg');
        img.setAttribute('width','100%');
        //将img插入到div中
        div.appendChild(img);

return div;
    }

function rand(m,n) {
        return Math.ceil(Math.random() * (n-m+1)) + m-1;
    }
```

#### 获取i元素 绑定单击事件
```javascript
    var childs = content.children;
    for(var i=0;i<childs.length;i++){
        childs[i].onclick = function() {
            alert(22222);
        }
    }
```

(3) Comments

John Doe- Reply

February 26, 2013 at 1:18 pm
- saqib sarwar- Reply
  
  February 26, 2013 at 1:20 pm
  
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
John Doe- Reply

February 26, 2013 at 1:27 pm

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Comment

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

JS 节点操作:尾部.头部.删除.替换.克隆元素

(3) Comments

John Doe- Reply

saqib sarwar- Reply

John Doe- Reply

Leave a Reply