插入節點

我們獲得了某個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>

https://jquery.cuishifeng.cn/index.html // jquery網站

https://www.bilibili.com/video/BV1JJ41177di?p=23

總結

以上是生活随笔為你收集整理的JavaScript-操作DOM对象-创建和插入dom节点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。