元素节点的创建、插入、删除、替换

最新推荐文章于 2022-10-20 10:02:38 发布

丁老师的技术随笔

最新推荐文章于 2022-10-20 10:02:38 发布

阅读量541

点赞数

分类专栏：教学授课-javascript

本文链接：https://blog.csdn.net/qustdjx/article/details/80176659

版权

教学授课-javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="div_id">
    
    <span>before</span>
</div>


<script>


    // 创建节点
    //<p></p>
    var e = document.createElement("p");
    // Hello QD
    var text =document.createTextNode('Hello QD');
    //<p>Hello QD</p>
    e.appendChild(text)
    console.log(typeof (e));


     // 插入节点，之前插入
   var div = document.getElementById('div_id');
   // document.body.appendChild(e)
    var span =document.getElementsByTagName('span');
    div.insertBefore(e,span[0])

    //删除节点
    //document.body.removeChild(div)

    // 复制节点
     var new_span= span[0].cloneNode(true)
     new_span.innerText='new span'
     div.insertBefore(new_span,span[0])

     // 替换 元素
     div.replaceChild(new_span,span[0])



</script>
</body>
</html>