插入DOM节点

最新推荐文章于 2023-07-17 09:31:19 发布

Rebkrth

最新推荐文章于 2023-07-17 09:31:19 发布

阅读量286

点赞数 3

分类专栏： Js 文章标签： dom 链表 javascript js

本文链接：https://blog.csdn.net/qq_45162683/article/details/114412336

版权

Js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是我们这个DOM节点已经存在了元素了，我们就不能这么干了！会产生覆盖。

追加

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

<div id="list">
    <p id="SE">JavaSE</p>
    <p id="EE">JavaEE</p>
    <p id="ME">JavaME</p>

</div>

<script>
     var sc=document.getElementById('script')
     var list=document.getElementById('list')

     list.append(sc)
</script>
</body>
</html>

创建一个新标签，实现插入

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

</head>
<body>
<p id="script">JavaScript</p>

<div id="list">
    <p id="SE">JavaSE</p>
    <p id="EE">JavaEE</p>
    <p id="ME">JavaME</p>

</div>

<script>
     var sc=document.getElementById('script')
     var list=document.getElementById('list')

     //list.append(sc)  附加

     var newp=document.createElement('p')
     newp.id='newp'
     newp.innerText='hello'
     list.append(newp)

     //创建一个标签节点 带参数的
     var myScript =document.createElement('script');
     myScript.setAttribute('type','text/script')  //括号里面的值  key  value
     list.appendChild(myScript)

     //可以创建一个Style标签
     var style=document.createElement('style');   //首先先创建一个空的style标签
     style.setAttribute('type','text/css');
     style.innerHTML='body{background-color:chartreuse}';   //设置标签内容

     document.getElementsByTagName('head')[0].appendChild(style)



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