js添加元素方法

添加元素到指定位置

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul id="sel">

</ul>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
    var li = document.createElement('li');
    li.innerText = 'abcd';
    //把li插入到ul的第一个位置
    var ul = document.getElementById('ul');
    //insertBefore
    //(li, [0]);  //insertBefore(要添加的元素,已添加的元素)
    ul.insertBefore(li, ul.children[0].nextElementSibling);//添加到指定元素后面
</script>

添加子节点到父节点的末尾

 var btn = document.getElementById('btn');
    btn.onclick = function () {
        var li = document.createElement('li');
        li.innerText = 'abcd';
        //把li插入到ul的第一个位置
        var ul = document.getElementById('ul');
 var div = document.createElement('div');
 div.innerText = 'div';
 ul.append(div);

 //appendChild
 var sel = document.getElementById('sel');
 //如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
 //本来div节点会被添加到#ul上,但是sel.添加了div,所以#ul没有div节点
 sel.appendChild(div);  //将原来div的位置  添加到 #sel中,原先的会消失
 //var cloneNode = (true); //cloneNode 生成的克隆节点,   div被克隆的节点,
 // = 'test';
 //(cloneNode); //克隆解决原节点转移位置

替换子节点

var div = document.createElement('div');
div.innerText = 'div';
ul.replaceChild(div,ul.children[0]); //(替换元素,被替换的元素)