插入DOM节点

插入节点

我们获得了某个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>
上一篇:学习旅程week3


下一篇:js实现拖拽效果