JavaScript--插入DOM

CodeJiao

已于 2022-08-22 00:12:46 修改

阅读量6.3k

点赞数 4

分类专栏： # HTML CSS JS 文章标签： javascript

于 2021-07-15 13:35:35 首次发布

本文链接：https://blog.csdn.net/I_r_o_n_M_a_n/article/details/118737523

版权

HTML CSS JS 专栏收录该内容

46 篇文章 5 订阅

订阅专栏

1. 插入DOM

当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？

1.1 innerHTML

如果这个DOM节点是空的

如果这个DOM节点是空的，直接使用 innerHTML = 'child' 就可以修改DOM节点的内容，相当于“插入”了新的DOM节点
如果这个DOM节点不是空的，那就不能这么做，因为 innerHTML 会直接替换掉原来的所有子节点。

示例:

<body>
	<div id="item"></div>
</body>
<script>
    let item = document.getElementById('item');
    //    设置HTML
    item.innerHTML = 'ABC<span style="color: red;font-size: 24px;">RED</span>XYZ'
</script>

结果:
在这里插入图片描述

1.2 appendChild()

appendChild()

如果这个DOM节点不是空的，那就不能这么做，因为 innerHTML 会直接替换掉原来的所有子节点。有两个办法可以插入新的节点。一个是使用 appendChild ，把一个子节点添加到父节点的最后一个子节点。例如:

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

把 JavaScript 添加到的最后一项：

    let js = document.getElementById('js'), list = document.getElementById('list');
    list.appendChild(js);

现在，HTML结构变成了这样：

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

在这里插入图片描述

因为我们插入的 js 节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

    let list = document.getElementById('list'),
        // 创建一个新的节点
        haskell = document.createElement('p');
    haskell.id = 'haskell';
    haskell.innerText = 'Haskell';
    list.appendChild(haskell);

在这里插入图片描述

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个节点，然后把它添加到节点的末尾，这样就动态地给文档添加了新的CSS定义：

    let d = document.createElement('style');
    d.setAttribute('type', 'text/css');
    d.innerHTML = 'p { color: red }'; // 把所有P标签字体颜色设置为 red
    document.getElementsByTagName('head')[0].appendChild(d);

结果:
在这里插入图片描述

1.3 insertBefore()

在这里插入图片描述

假定我们要把 Haskell 插入到 Python 之前

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

可以这么写：

    let list = document.getElementById('list'), python = document.getElementById('python'),
        haskell = document.createElement('p');
    haskell.id = 'haskell';
    haskell.innerText = 'Haskell';
    list.insertBefore(haskell, python);