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

2024-10-31 20:05:49

一、基本语法与解释

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文档内添加新的元素节点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析

本文实例讲述了JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作.分享给大家供大家参考,具体如下: createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChild createElement 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); createTextNode 为 <p>
JS实现添加,替换,删除节点元素的方法

本文实例讲述了JS实现添加,替换,删除节点元素的方法.分享给大家供大家参考,具体如下: 一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现下面是方法: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose
JS简单添加元素新节点的方法示例

本文实例讲述了JS简单添加元素新节点的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS添加新节点的几种方法</title> </head> <body> <div id="d">
使用JavaScript在html文档内添加新的元素节点

目录一.基本语法与解释 1.在某元素附近创建一个新的元素节点 2.删除标签 3.修改标签 4.使用选择器选出某一类标签二.实际应用 1.完整代码 2.运行效果三.注意事项前言: 动态的改变原有html文档结构一.基本语法与解释 1.在某元素附近创建一个新的元素节点 // 将节点插入指定标签之后 // 创建一个p标签对象 var para = document.createElement("p"); // 创建文本对象 var node = document.crea
用JavaScript获取页面文档内容的实现代码

JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础</title> </head> <body> <p>一. 用Documen
pytest文档内置fixture的request详情

目录前言一.FixtureRequest 二.request.param 三.request.config 四.request.module 五.request的相关成员对象前言 request 是 pytest 的内置 fixture , "为请求对象提供对请求测试上下文的访问权,并且在fixture被间接参数化的情况下具有可选的“param”属性."这是官方文档对request的描述,可参考的文档不多. 一.FixtureRequest FixtureRequest 是来自
JavaScript打开word文档的实现代码(c#)

在C#中打开word文档其实不算太难,方法也比较多. 一.C#中打开word文档方法复制代码代码如下: //在项目引用里添加上对Microsoft Word 11.0 object library的引用 private void button1_Click(object sender, System.EventArgs e) { //调用打开文件对话框获取要打开的文件WORD文件,RTF文件,文本文件路径名称 OpenFileDialog opd = new OpenFileDialog()
mongodb如何对文档内数组进行过滤的方法步骤

本文介绍了mongodb如何对文档内数组进行过滤的方法步骤,分享给大家,具体如下: mongodb文档内包含数组,需要将数组中符合条件的数据过滤出来并返回结果集,可以用两种方式来查询group或filter. 数据源: { "_id" : ObjectId("5bbcc0c9a74db9804e78a157"), "uid" : "1000001", "name" : "zhangsan"
JavaScript文档加载模式以及元素获取

一.文档加载模式 1.事件三要素:事件源(触发时间的元素):事件名称(click点击事件):事件处理程序(事件出发后要执行的代码函数形式)存在问题:浏览器加载一个页面的时候,是按照自上而下的顺序加载的,若将script标签写到head内部,在代码执行时候,页面还没有加载,页面中的DOM对象也没有加载.就会导致js中无法获取页面中的DOM对象.解决方法:onload事件,会在整个页面加载完之后才触发,为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确
Java 在Word文档中添加艺术字的示例

与普通文字相比,艺术字更加美观有趣也更具有辨识度,常见于一些设计精美的杂志或宣传海报中.我们在日常工作中编辑Word文档时,也可以通过添加艺术字体来凸显文章的重点,美化页面排版.这篇文章将介绍如何使用Free Spire.Doc for Java在word文档中添加艺术字并设置样式和效果. Jar包导入方法一:下载Free Spire.Doc for Java包并解压缩,然后将lib文件夹下的Spire.Doc.jar包作为依赖项导入到Java应用程序中. 方法二:通过Maven仓库安装JAR
C#/VB.NET实现在Word文档中添加页眉和页脚

目录程序环境在 Word 文档中添加页眉和页脚完整代码效果图页眉位于文档中每个页面的顶部区域,常用于显示文档的附加信息,可以插入时间.图形.公司微标.文档标题.文件名或作者姓名等:页脚位于文档中每个页面的底部的区域,常用于显示文档的附加信息,可以在页脚中插入文本或图形.今天这篇文章就将为大家展示如何以编程的方式在在 Word 文档中添加页眉和页脚.下面是我整理的思路及方法,并附上C#/VB.NET供大家参考. 程序环境本次测试时,在程序中引入Free Spire.Doc for .N
Java 在 Word 文档中使用新文本替换指定文本的方法

创作一份文案,经常会高频率地使用某些词汇,如地名.人名.人物职位等,若表述有误,就需要整体撤换.文本将介绍如何使用Spire.Doc for Java,在Java程序中对Word文档中的指定文本进行替换. 工具/原料 Free Spire.Doc for Java(免费版) IntelliJ IDEA Jar文件获取及导入方法1:先从官网下载jar包. 导入步骤: 下载后,解压文件,并将lib文件夹下的Spire.Doc.jar文件导入java程序.参考如下导入效果: 方法2:可通过maven
javascript打开word文档的方法

首先我们新建一个html文件,并且写一个FileUpLoad以及button控件. 代码如下: 复制代码代码如下: <input id="flUpload" type="file" />fileUpload <input id="btnOpenFile" type="button" value="button" onclick="OpenFile()" /> 然