首页 > 资讯 > 前端开发 > JavaScript >使用JavaScript在html文档内添加新的元素节点

485

分享到

使用JavaScript在html文档内添加新的元素节点

2024-04-02 19:04:59 485人浏览安东尼

摘要

目录一、基本语法与解释1.在某元素附近创建一个新的元素节点2.删除标签3.修改标签4.使用选择器选出某一类标签二、实际应用1.完整代码2.运行效果三、注意事项前言：动态的改变原有h

一、基本语法与解释

1.在某元素附近创建一个新的元素节点

 // 将节点插入指定标签之后
 // 创建一个p标签对象
 var para = document.createElement("p");
 // 创建文本对象
 var node = document.createTextNode("这是一个新的段落。");
 // 将文本对象加入p标签对象
 para.appendChild(node);
 // 选出id=div1的标签
 var element = document.getElementById("div1");
 // 在该标签之后加上刚创建的p标签
 element.appendChild(para);
 // 将节点插到指定标签之前
 var para = document.createElement("p");
 var node = document.createTextNode("这是一个新的段落。");
 para.appendChild(node);
 var element = document.getElementById("div1");
 var child = document.getElementById("p1");
 element.insertBefore(para, child);

2.删除标签

// 删除存在的标签
 // 以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素
 //（删除节点必须知道父节点）：
 var parent = document.getElementById("div1");
 var child = document.getElementById("p1");
 parent.removeChild(child);

3.修改标签

// 替换标签
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
//将内容添加进标签
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
//将parent中的para标签替换为child
parent.replaceChild(para, child);

4.使用选择器选出某一类标签

// 选出所有同一类型的标签 获取HTMLCollection 对象。
    function myFunction() {
        // getElementsByTagName() 方法返回所有同一类型的标签
        var myCollection = document.getElementsByTagName("p");
        var i;
        for (i = 0; i < myCollection.length; i++) {
            // 对标签的属性进行修改
            myCollection[i].style.color = "red";
        }
    }

二、实际应用

1.完整代码

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
    <body>
        <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
        </div>
    
    <script>
        // 将节点插入指定标签之后
        // 创建一个p标签对象
        var para = document.createElement("p");
        // 创建文本对象
        var node = document.createTextNode("这是一个新的段落。");
        // 将文本对象加入p标签对象
        para.appendChild(node);
        // 选出id=div1的标签
        var element = document.getElementById("div1");
        // 在该标签之后加上刚创建的p标签
        element.appendChild(para);
        // 将节点插到指定标签之前
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落。");
        para.appendChild(node);
        var element = document.getElementById("div1");
        var child = document.getElementById("p1");
        element.insertBefore(para, child);
        // 删除存在的标签
        // 以下代码是已知要查找的子元素，然后查找其父元素，再
        删除这个子元素（删除节点必须知道父节点）：
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.removeChild(child);
        // 替换标签
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落。");
        para.appendChild(node);
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.replaceChild(para, child);
        // 选出所有同一类型的标签 获取HTMLCollection 对象。
        function myFunction() {
            // getElementsByTagName() 方法返回所有同一类型的标签
            var myCollection = document.getElementsByTagName("p");
            var i;
            for (i = 0; i < myCollection.length; i++) {
                // 对标签的属性进行修改
                myCollection[i].style.color = "red";
            }
        }
    </script>
    </body>
</html>

2.运行效果

三、注意事项

使用选择器选出某一类标签获取HTMLCollection 对象时
HTMLCollection 不是一个数组！
HTMLCollection 看起来可能是一个数组，但其实不是。
我们可以像数组一样，使用索引来获取元素。

HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join()
第二种筛选方法 NodeList
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

HTMLCollection 与 NodeList 的区别：

HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似，
可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。

总结：
增删改查元素节点的时候,一般用于信息管理系统。信息的统计。但是由于现在市场上有许多成熟的框架,我们一般也用不到。

到此这篇关于使用javascript在html文档内添加新的元素节点的文章就介绍到这了,更多相关JavaScript在html文档内添加新的元素节点内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 使用JavaScript在html文档内添加新的元素节点

本文链接: https://lsjlt.com/news/140461.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

使用JavaScript在html文档内添加新的元素节点

目录

一、基本语法与解释

1.在某元素附近创建一个新的元素节点

2.删除标签

3.修改标签

4.使用选择器选出某一类标签

二、实际应用

1.完整代码

2.运行效果

三、注意事项

使用JavaScript在html文档内添加新的元素节点

怎么在JavaScript中使用unshift() 方法向数组添加元素

在JavaScript的jQuery中如何使用detach()方法删除dom节点元素

html文档的头部元素有哪些及怎么使用

CSS中如何使用伪元素在文本上添加图片

怎么在JavaScript中使用reload()方法重新加载文档

使用Python脚本添加新的相关节点到arxml文件中的指定位置

使用Javascript在标签内外插入标签元素的案例

如何使用PHP中的array_unshift()函数在数组开头添加元素

javascript当前元素失去焦点并且元素的内容发生改变而触发此事件使用什么函数，详细讲解

SQLServer 错误 17884 在最后 %d 秒内，没有一个工作线程拾取了分配给节点 %d 上的进程的新查询。查询被阻塞或长时间运行可能导致出现此情况，并且可能会延长客户端响应时间。请使用

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

写给小白学习的地理信息的表示法GeoJSON

vue使用Swiper踩坑解决避坑

JavaScrip简单数据类型隐式转换的实现

细说JS数组遍历的一些细节及实现

初学者如何快速搭建Express开发系统步骤详解

深入浅出JavaScript前端中的设计模式