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

<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>
    var bts = document.getElementsByTagName('button');
    var content = document.getElementById('content');

第一个按钮的单击事件

    bts[0].onclick = function() {
        var div = createDiv();
        //执行插入
        content.appendChild(div);
    }

第二个按钮的单击事件

    bts[1].onclick = function() {
        //创建新元素
        var div = createDiv();
        var first = content.firstElementChild;
        var first = content.children[3];
        //执行插入
        content.insertBefore(div, first); // insert插入  before 在....之前
    }

点击元素删除最后一个div

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

绑定事件

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

克隆元素

    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元素 绑定单击事件

    var childs = content.children;
    for(var i=0;i<childs.length;i++){
        childs[i].onclick = function() {
            alert(22222);
        }
    }