常用元素操作方法 · 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> ```