脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript在html文档内添加新的元素节点

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

 更新时间：2022年02月25日 09:12:22   作者：酷尔。  
这篇文章主要介绍了使用JavaScript在html文档内添加新的元素节，主要打方式就是动态的改变原有html文档结构，下文详细介绍内容需要的可以参考一下

前言：

动态的改变原有html文档结构

一、基本语法与解释

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

您可能感兴趣的文章:

相关文章

  • 跟我学Nodejs（三）--- Node.js模块

    跟我学Nodejs（三）--- Node.js模块

    这是本系列的第三篇文章了，前面2篇网友们反馈回来不少的消息，加上最近2天比较忙，一直没来得及整理，周末了，赶紧给大家整理下发出来，本文讲的是node.js模块
    2014-05-05
  • JS实现数组内值累加常见的3个方法

    JS实现数组内值累加常见的3个方法

    这篇文章主要给大家介绍了关于JS实现数组内值累加常见的3个方法,文中通过实例代码将3个方法介绍的非常详细,对大家学习或者使用js具有一定参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 使用console进行性能测试

    使用console进行性能测试

    各大浏览器内置的开发工具，都提供了一个console对象。它主要有两个作用：显示网页代码运行时的错误信息。提供了一个命令行接口，用来与网页代码互动。下面我们就来详细研究下如何使用console进行性能测试。
    2015-04-04
  • jQuery NProgress.js加载进度插件的简单使用方法

    jQuery NProgress.js加载进度插件的简单使用方法

    NProgress是基于jquery的，且版本要 >1.8 。这篇文章主要介绍了NProgress.js加载进度插件的简单使用方法,需要的朋友可以参考下
    2018-01-01
  • 仿微博字符限制效果实现代码

    仿微博字符限制效果实现代码

    字符限制公司项目中有个这样的东西，大家用微博的都明白哈
    2012-04-04
  • js实现的早期滑动门菜单效果代码

    js实现的早期滑动门菜单效果代码

    这篇文章主要介绍了js实现的早期滑动门菜单效果代码,涉及javascript数组遍历及通过鼠标事件动态改变页面元素属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 可插入图片的TEXT文本框

    可插入图片的TEXT文本框

    这篇文章主要介绍了可插入图片的TEXT文本框，有需要的朋友可以参考一下
    2013-12-12
  • js操作iframe的一些方法介绍

    js操作iframe的一些方法介绍

    本篇文章介绍了js操作iframe的一些方法的实例代码与步骤，有需要的朋友可以参考一下
    2013-06-06
  • JS异步文件分片断点上传的实现思路

    JS异步文件分片断点上传的实现思路

    在项目中有时会遇到大文件上传，经常会出现链接超时的问题，所以就需要使用文件分片上传的方式来上传大文件。下面通过本文给大家介绍js异步文件分片断点上传的实例代码，需要的的朋友参考下吧
    2016-12-12
  • JavaScript原型链及常见的继承方法

    JavaScript原型链及常见的继承方法

    这篇文章主要介绍了JavaScript原型链及常见的继承方法,文章围绕主题展开详细的内容介绍，具有一定的的参考价值，需要的朋友可以参考一下
    2022-07-07

最新评论