插入DOM节点

2021-03-05 20:33:27 作者：互联网

插入节点

我们获得了某个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>

标签：style,DOM,list,插入,var,newp,document,节点
来源： https://blog.csdn.net/qq_45162683/article/details/114412336