js动态操纵DOM节点方法

本文主要和大家分享js动态操纵DOM节点方法,主要是js控制添加和删除dom节点和删除DOM节点,希望能帮助到大家。

js控制添加和删除dom节点

1.添加dom节点

    

我是第一个段落

    

我是第二个段落

登录后复制

浏览器效果

360截图20180316163511895.jpg

开始编写js代码

    /*创建一个元素节点*/    var arr=document.createElement("p");    /*给元素增加文本节点*/    var txt=document.createTextNode("这是添加的文本");     /*把文本节点追加到元素节点上*/    arr.appendChild(txt);       /*找到一个存在的元素节点*/    var par=document.getElementById("p_1");       /*把新的元素节点追加到已存在的元素节点上*/    par.appendChild(arr);

登录后复制

浏览器效果

360截图20180316163404049.jpg

可以找父元素,添加节点。也可以找兄弟元素追加节点。找父元素追加新添加的元素会在所有元素的最后面,找兄弟元素添加会默认选择你所选元素的后面添加,这点要注意。

2.删除DOM节点

如需删除 HTML 元素,您必须首先获得该元素的父元素:

我是第一个段落

我是第二个段落

登录后复制

360截图20180316163601113.jpg

浏览器效果图

360截图20180316163511895.jpg

好的,完工,谢谢观看。

相关推荐:

原生JavaScript对dom节点操作总结

jQuery中DOM节点操作方法总结

实例分享JQuery 选择器、DOM节点操作练习

以上就是js动态操纵DOM节点方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2781781.html

(0)
上一篇 2025年3月8日 16:22:40
下一篇 2025年3月8日 16:22:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 全局计数的JavaScript代码

    这次给大家带来全局计数的javascript代码,使用javascript实现全局计数注意事项有哪些,下面就是实战案例,一起来看一下。 在一些游戏或广告场景中,你需要记录用户在当前页面上点击某一个按钮的次数,这时你可以使用jQuery的.d…

    编程技术 2025年3月8日
    200
  • js实现深浅拷贝方法

    说起深浅拷贝,我觉得需要理清楚 值类型 和 引用类型,本文主要和大家分享js实现深浅拷贝方法,希望能帮助到大家。 值类型 所谓 值类型 就是 undefined,null,number, string ,boolean 等五种基本数据类型,…

    2025年3月8日 编程技术
    200
  • js的内置对象有哪些

    这次给大家带来js的内置对象有哪些,使用js内置对象的注意事项有哪些,下面就是实战案例,一起来看一下。 Js之内置对象和浏览器对象 1、String对象: String对象用于处理已有的字符串 字符串可以使用双引号或者单引号 1)index…

    编程技术 2025年3月8日
    200
  • javascript的必包详解

    这次给大家带来javascript的必包详解,使用javascript的注意事项有哪些,下面就是实战案例,一起来看一下。 闭包,这个名字好奇怪,言归正传,先说一下js函数的变量作用域以下例子全部基于局部变量 函数内部访问函数外部变量 dem…

    编程技术 2025年3月8日
    200
  • JS面向对象继承详解

    让一个原型对象等于另一个类型的实例,该原型对象的实例拥有继承类型的全部属性和方法,继承类型的实例属性则存在于当前新的原型对象中 。本文主要和大家分享JS面向对象继承详解,希望能帮助到大家。 function person (name ,ag…

    编程技术 2025年3月8日
    200
  • js中this的指向问题探讨

    本文主要和大家分享js中this的指向问题探讨,this关键字代表当前正在执行的方法的对象,如果没有当前方法,则是指全局变量。就是说this代表调用该方法的对象的引用。 一、全局作用域或者普通函数中this指向全局对象window。 //直…

    编程技术 2025年3月8日
    200
  • js页面存储之刷新内容不丢失实现方法

    html5 是下一代 html 标准,开始吸引越来越多人的目光。html5 的 dom storage 机制提供了一种方式让程序员能够把信息存储到本地的计算机上,在需要时获取。这点和 cookie 相似,区别是 dom storage 提供…

    2025年3月8日
    200
  • AngularJS依赖注入的几种方式

    本文参考AngularJs权威指南 概念 依赖注入是一种设计模式,它可以去除对依赖关系的硬编码,从而可以在运行时改变甚至移除依赖关系。 从功能上看,依赖注入会事先自动查找依赖关系,并将注入目标告知被依赖的资源,这样就可以在目标需要时立即将资…

    编程技术 2025年3月8日
    200
  • javascript对象有哪三个属性

    这次给大家带来javascript对象有哪三个属性,javascript对象三个属性的注意事项有哪些,下面就是实战案例,一起来看一下。 每个对象都有与之相关的原型(prototype)、类(class)和可扩展性(extensible at…

    编程技术 2025年3月8日
    200
  • JavaScript中的函数劫持实例详解

    函数劫持,顾名思义,即在一个函数运行之前把它劫持下来,添加我们想要的功能。当这个函数实际运行的时候,它已经不是原本的函数了,而是带上了被我们添加上去的功能。这也是我们常见的钩子函数的原理之一。  乍一看上去,这很像是函数的改写。函数的改写也…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论