JS之DOM5

Posted 2020-10-16 走在程序的路上

1 createElement 创建元素

语法：document.createElement(tagName)

注意：主语只能是document

         只能用来创建元素节点

         创建后的标签可对它操作

2 appendChild 往父节点里添加一个元素

  语法：父.appendChild(childNode)

注意：只能添加标签节点，不能添加其他节点

<input type="button" id="btn" value="创建元素"/>


<script type="text/javascript">
var btn=document.getElementById("btn");
btn.onclick=function(){
    var div=document.createElement("div");//创建元素
        div.style.width="100px";
        div.style.height="100px";
        div.style.background="red";
        document.body.appendChild(div);//插入元素
}
</script>

3 insertBefore (要插入的元素，插入的位置)

  注意：2 个参数必须同时存在

4 父.removeChild(childNode) 移除元素

5 父.replaceChild(替换元素，被替换元素)

6 要克隆的节点.cloneNode(boolean)

参数
* true 克隆元素和元素包含的子孙节点
* false 克隆元素但是不包含子孙节点
* 如果不写参数的话，默认为false
* 克隆只克隆html、css，js是不会被克隆的，如果克隆元素身上有js的功能，那克隆后的元素是不具备的
* 如果克隆的元素本身有id，那克隆后的元素也会有id，两个就会重名，这样的话是不符合标准，手动去改一下id
* 返回值
* 返回被克隆的节点