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

最新推荐文章于 2024-04-04 01:35:44 发布

王2gou蛋

最新推荐文章于 2024-04-04 01:35:44 发布

阅读量890

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_38959934/article/details/119718850

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

插入节点

我们获得了某个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>
    // insertBefore
    let ee = document.getElementById('ee')
    let js1 = document.getElementById('js')
    let list1 = document.getElementById('list')
    // 要插入的节点.insertBefore(要插入的节点， 目标节点)
    list1.insertBefore(js1, ee)
</script>