JS中DOM的增、删、改（含练习实例及思路）

最新推荐文章于 2023-09-15 11:36:57 发布

VIP文章 Fantasc

最新推荐文章于 2023-09-15 11:36:57 发布

阅读量216

点赞数

分类专栏： JS基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Fantasc/article/details/119417399

版权

创建元素节点，document.createElement() 可以用来创建一个元素节点对象，这个方法需要一个标签名作为参数，根据标签名来创建元素节点对象，并将创建好的对象作为返回值返回。
- 例如创建一个li元素节点：

var li = document.createElement("li");

创建文本节点，document.createTextNode()，可以用来创建一个文本节点对象，需要一个文本内容作为参数，根据文本内容创建节点，并将创建的节点返回。
- 例如创建一个名为”广州“的文本节点

var gzText = document.createTextNode("广州");

将一个节点设置为另一个节点的子节点，appendChild()，可以向一个父节点中添加一个新的子节点。

用法：父节点.appendChild(子节点);
- 例如将以上创建的文本节点设置为li节点的子节点

li.appendChild(gzText);

在一个节点前面插入一个新元素节点，insertBefore()，可以在指定的子节点前插入新的节点，这个方法由父节点调用。用法：父节点.insertBefore(新节点，旧节点);
- 例如，将以上的广州节点插入到id为bj的子节点前面，假设他们的父节点是city

city.insertBefore(li,bj)；

用新节点来替换旧节点，replaceChild()，可以用新创建的节点来替换掉原有的节点，此方法由父节点调用，用法：父节点.repaceChild(新节点，旧节点);
- 例如，用以上创建的广州节点来替换掉id为bj的子节点，假设city是他们的父节点

city.replaceChild(li,bj);

删除一个节点，removeChild()，此方法可以删除掉已存在的一个子节点，由父节点嗲用这个方法
- 例如，删除掉city父节点下的id为bj的子节点

city.removeChild(bj);

具体的练习如下：

在看以下代码的时候，要注意一点：使用下面的增、删、改对应的insertBefore()、removeChild()以及replaceChild()，他们对节点进行操作时，会影响到整个父节点，虽然是对个别节点进行操作，但是这几种方法会将原有的父节点删除再重新添加，也就相当于将原有的父节点刷新了一遍。

针对以上问题，可以考虑用innerTHML来与这几种方法结合使用，注意看代码中第一点之后的注释内容，之后的方法也都可以用innerHTML属性来进行相关的操作，避免对父元素的影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/dom.css"/>
    <script type="text/javascript">
        window.onload = function(){
   

            //1.创建一个“广州”子节点，并将其添加到id为city的节点下
            myClick("btn1",function()

最低0.47元/天解锁文章

Fantasc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中DOM的增、删、改（含练习实例及思路）

创建元素节点，document.createElement() 可以用来创建一个元素节点对象，这个方法需要一个标签名作为参数，根据标签名来创建元素节点对象，并将创建好的对象作为返回值返回。例如创建一个li元素节点：var li = document.createElement("li");创建文本节点，document.createTextNode()，可以用来创建一个文本节点对象，需要一个文本内容作为参数，根据文本内容创建节点，并将创建的节点返回。例如创建一个名为”广州“的文本节点.
复制链接

扫一扫