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
    //ul.insertBefore(li, ul.children[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 = div.cloneNode(true); //cloneNode 生成的克隆节点, div被克隆的节点,
 //cloneNode.innerText = 'test';
 //sel.appendChild(cloneNode); //克隆解决原节点转移位置

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