JavaScript如何添加节点

JavaScript添加节点的方法:1、使用appendChild(),语法“父级节点.appendChild(要添加的节点)”;2、使用insertBefore(),语法“父级节点.insertBefore(要插入的节点,插入位置)”。

JavaScript如何添加节点

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

JS种添加节点一共有2种方法

1、appendChild()

把要添加的节点添加到指定父级里面的最后面,所以也叫追加

立即学习“Java免费学习笔记(深入)”;

使用方式:父级节点.appendChild( 要添加的节点 )

代码:

document.onclick = function(){    oDiv2.appendChild(oB2);//将b2追加到div2里面的最后面}

登录后复制

图示:

70088G1DGSO{OSB}E`_{8NW.png

2、insertBefore()

把要插入的节点添加到指定父级里面的指定节点之前

使用方式:父级节点.insertBefore( 要插入的节点,指定节点 )

JS代码:(注:每执行一次新方法时,上一个方法都会被注释掉,为了易懂,此处注释一次,下面的文章中将不再把注释上一个方法的代码发上来)

document.onclick = function(){    //oDiv2.appendChild(oB2);此处将上一个方法注释    oDiv2.insertBefore(oB2,oSpan2);//将b2插入到div2中的span2前面}

登录后复制图示:

2$J}$BV%0)(T]86IWUA5FCR.png

所有浏览器都支持此方法,但是值得注意的是,如果第二个参数节点不存在,在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中,而其他主流浏览器(Firefox、Chrome、Opera等)下会报错,所以在插入节点的时候,需要先判断第二个参数节点是否存在

【推荐学习:javascript高级教程】

以上就是JavaScript如何添加节点的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月7日 21:37:03
下一篇 2025年3月7日 21:37:10

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

相关推荐

  • javascript如何调用函数

    方法:1、用“函数名(参数,参数)”语句调用;2、作为对象的方法调用,语法“对象名.方法名()”;3、用call或apply调用,语法“函数名.call|apply(参数,参数)”;4、用new命令,语法“new 函数名(参数,参数)”。 …

    2025年3月7日
    200
  • javaScript如何添加随机数

    在javascript中,可以使用“Math.random()”添加随机数。“Math.random()”函数返回一个范围从0到小于1的随机浮点数,也就是说,从0(包括0)往上,但是不包括1(排除1),它不能被用户选择或重置。 本教程操作环…

    2025年3月7日
    200
  • javascript中$是什么意思

    javascript中“$”的意思:1、“$”可以用来表示变量,如“var $s=wwd”;2、在正则表达式中,“$”表示匹配字符串结束位置;3、用“$”来表示一个查找对象的函数,用来代替“document.getElementById”。…

    2025年3月7日
    200
  • 深入浅析ES10中的Object.fromEntries()

    本篇文章带大家详细了解一下es10中的object.fromentries()。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 我们知道 Object.entries() 是将对象转成一个自身可枚举属性的键值对数组。同样,…

    2025年3月7日
    200
  • javascript怎么设置滚动条高度

    javascript设置滚动条高度的方法:首先获得在当前选中的li前面的节点的高度;然后减去ul高度的一半设置给ul的scrollTop,把滚动条设置在中间位置即可。 本文操作环境:windows7系统、javascript1.8.5版、D…

    2025年3月7日
    200
  • 如何关掉javascript

    关掉javascript的方法:首先打开浏览器;然后选择浏览器右上角的设置;接着打开设置窗口,点击“高级”;最后找到“安全与隐私”,并找到关闭JavaScript功能即可。 本文操作环境:Windows10系统、Dell G3电脑、qq浏览…

    2025年3月7日 编程技术
    200
  • javascript怎么将数组转为json格式

    在javascript中,可以使用转化函数“JSON.stringify()”来将数组转为json格式,语法格式“JSON.stringify(数组)”;该函数可以对数组或对象进行转换,然后返回包含JSON文本的字符串。 本教程操作环境:w…

    2025年3月7日
    200
  • javascript怎么判断变量是否相等

    判断方法:1、利用相等运算符“==”或者“===”;2、利用数组中的toString()方法;3、利用“Object.is()”方法;4、先利用“JSON.stringify()”将对象或数组转为字符串类型,然后使用“===”进行相等比较。…

    2025年3月7日
    200
  • 如何使用JavaScript制作页面效果

    本篇文章给大家详细介绍一下使用javascript制作页面的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 使用 JavaScript 制作页面效果  DOM 编程 DOM 编程(Document Object Mo…

    2025年3月7日 编程技术
    200
  • javascript怎么显示隐藏div

    方法:1、利用display属性,语法“div对象.style.display=”none|block””;2、利用visibility属性,语法“div对象.style.visibility=”hidd…

    2025年3月7日
    200

发表回复

登录后才能评论