节点的增加，删除，创建，插入

最新推荐文章于 2022-03-27 23:13:14 发布

萌新+1

最新推荐文章于 2022-03-27 23:13:14 发布

阅读量292

点赞数

本文链接：https://blog.csdn.net/qq_43288882/article/details/89883486

版权

节点属性{createElement,append(),insertBefore,removeChild,replaceChild,cloneNode}

【为了防止忘记】

createElement

//创建一个p标签
var tit=document.createElement('p');
//为p标签添加一个id
tit.setAttribute('id','divTxt');

append() && appendChild()

var box = document.createElement('box')
var ul = document.createElement('ul')
var li = document.createElement('li')
var a = document.createElement('a')
 a.href = 'http://www.baidu.com';
a.innerHTML = '百度';
// 将子标签添加到父标签内
li.appendChild(a);
ul.appendChild(li);
box.appendChild(ul);
//append()  可以同时传入多个节点或字符串，没有返回值；
//appendChild() 只能传一个节点，且不直接支持传字符串【需要appendChild(document.createTextElement('字符串'))代替】，
返回追加的 Node 节点；若 appendChild() 的参数是页面存在的一个元素
，则执行后原来的元素会被移除；
例如：document.getElement("a").appendChild(document.getElementByIdx("b"))，执行后，b 元素会先被移除，然后再添加到 a 中。
//innerHTML添加的是纯字符串，不能获取内部元素的属性；不同于 appendChild 添加到的是 dom 对象，返回的也是 dom 对象，可以通过 dom 对象访问获取元素的各种属性。

insertBefore

<body>
    <div id="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
</body>
<script>
    var box = document.getElementById('box')

    var node = document.createElement('p')

    node.innerHTML = 123455

    // insertBefore插入 。。。。之前 nextSibling  .。。之后
    box.insertBefore(node,box.children[0].nextSibling)
//输出：1 ， 123455  ，2  ， 3  ，4

</script>

insertBefore,removeChild,replaceChild,cloneNode

<body>
    <div id="box" class="abc">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
</body>
<script>
    var box = document.getElementById('box')

    // 删除子节点
    // box.removeChild(box.children[2])

    // 替换子节点 who替换who
    box.replaceChild(box.children[2],box.children[0])

    // 添加节点
    // var txt = document.createElement('p')
    // txt.innerHTML = 4;
    // box.append(txt)

    // 克隆节点
    //判断为true #box2复制#box1内的所有标签
    var node = box.cloneNode(true);
    node.id = 'box2'
    box.append(node)
    console.log(node)

</script>