常用元素操作方法 · JavaScript

## insertBefore 在当前节点的某个子节点之前插入一个子节点. ``` <body> <input type="button" id="btn" value="点击"> <ul id="ul"> <li>111</li> <li>222</li> <li>333</li> </ul> <script> var btn = document.getElementById('btn'); btn.onclick = function () { var li = document.createElement('li'); li.innerText = 'abc'; //把li插入到ul中的第一个位置 var ul = document.getElementById('ul'); ul.insertBefore(li, ul.firstElementChild); } </script> ``` ## replaceChild 把当前元素的标签进行替换. ``` <body> <input type="button" id="btn" value="点击"> <ul id="ul"> <li>111</li> <li>222</li> <li>333</li> </ul> <script> var btn = document.getElementById('btn'); btn.onclick = function () { var li = document.createElement('li'); li.innerText = 'abc'; //把li插入到ul中的第一个位置 var ul = document.getElementById('ul'); ul.replaceChild(li,ul.firstElementChild) } </script> ``` ## appendChild另外一种用法如果被插入的节点已经存在于当前文档中,则这个节点会首先从原来的位置溢出,然后2插入到新位置.如果要保留这个节点,先调用Node.clineNode方法. ``` <body> <input type="button" id="btn" value="点击"> <ul id="ul"> <li>111</li> <li>222</li> <li>333</li> </ul> <ul id="sel"> </ul> <script> var btn = document.getElementById('btn'); btn.onclick = function () { var li = document.createElement('li'); li.innerText = 'abc'; //把li插入到ul中的第一个位置 var ul = document.getElementById('ul'); var sel = document.getElementById('sel'); sel.appendChild(ul.firstElementChild); } </script> ```