# 页面修改型API ## appendChild ~~~ parent.appendChild(child); ~~~ ## insertBefore 需要三个相关参数： ~~~ parentNode.insertBefore(newNode,refNode); ~~~ parentNode 父节点 newNode 要加入的节点 refNode 参照节点 例如： ```html <div id="sssss"> <ul id="toClone"> <li> <a href="/">turn yellow</a> </li> <li> <a href="/blue">turn blue</a> </li> <li> <a href="/green">turn green</a> </li> </ul> </div> </body> <script> let toClone = document.getElementById('toClone'); let sssss = document.getElementById('sssss'); let cloned = toClone.cloneNode(true); sssss.insertBefore(cloned, toClone) </script> ``` ## removeChild 删除节点并返回。返回的是被删除的节点，可以进一步操作。 例子的html和上面一样，script为 ~~~ let toClone = document.getElementById('toClone'); let sssss = document.getElementById('sssss'); console.log(sssss.removeChild(toClone)); ~~~ 返回 ```html <ul id="toClone"> <li> <a href="/">turn yellow</a> </li> <li> <a href="/blue">turn blue</a> </li> <li> <a href="/green">turn green</a> </li> </ul> ``` ## replaceChild 用法： ~~~ parent.replaceChild(newChild,oldChild); ~~~ newChild是替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，则其将被转移到新的位置 oldChild是被替换的节点