JavaScript-操作DOM对象-创建和插入dom节点

插入节点

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

将标签追加到其他标签

<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div>
<script>let js = document.getElementById('js');let list = document.getElementById('list')list.appendChild(js)
</script>

在这里插入图片描述

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

<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div>
<script>let js = document.getElementById('js');let list = document.getElementById('list')// list.appendChild(js)// 创建一个新的标签 实现插入let new_p = document.createElement('p'); // 创建一个p标签new_p.id = 'newP'new_p.innerText = 'hello, world'list.appendChild(new_p)// 使用 setAttribute 创建一个标签节点let myScript = document.createElement('script');myScript.setAttribute('type', 'text/javascript');list.appendChild(myScript)
</script>

在这里插入图片描述

设置css样式

<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div>
<script>// 设置 样式 方式一let body = document.getElementsByTagName('body')// console.log(body)// body[0].style.backgroundColor = '#23d9ea'// 设置 样式 方式二let myStyle = document.createElement('style');myScript.setAttribute('type', 'text/css');myStyle.innerHTML = 'body{background-color: rgb(33, 21, 234);}'document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>

insertBefore
把一个节点插入到目标节点的前面

<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>// insertBeforelet ee = document.getElementById('ee')let js1 = document.getElementById('js')let list1 = document.getElementById('list')// 要插入的节点.insertBefore(要插入的节点， 目标节点)list1.insertBefore(js1, ee)
</script>