JavaScript随手记之insertBefore

最新推荐文章于 2020-04-30 22:50:32 发布
最新推荐文章于 2020-04-30 22:50:32 发布
阅读量421 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Wind_waving/article/details/88132276
本文详细解析了如何正确使用insertBefore函数来操作DOM节点。通过实例演示，读者将了解该函数的正确使用方式及其对父节点的要求，帮助提升网页开发效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最初学习用insertBefore(new,old)函数操作DOM节点时总是没有作用，后来才发现原来使用insertBefore的对象必须是当前节点的parentNode,比如以下HTML：

<div id="parent">
    <div id="child">text</div>
</div>

如果要在id为child的元素(curnode)前面添加一个标签，假设为要添加的标签创建的节点名为benode，则要用parent.insertBefore(benode,curnode)

 

JavaScript：createElement和insertBefore
01-07
obj = document.createElement(tag)创建一个标签，oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入的标签的父节点调用，appendChild将创建的元素依次加在后面，而insertBefore则可以将创建的特定插在特定元素element前面 点击一下“创建LI”按钮，则HTML页面上增加一个 标签 第一步：创建 第二步：添加   两种方式 createElement和appendChild完整示例 learn js [removed] = function(){
JavaScript之appendChild、insertBefore和insertAfter使用说明
10-28
几天需要用到对HTML节点元素的删/插操作，由于用到insertBefore方法的时候遇到了一些麻烦，现在作为知识的整理，分别对appendChild、insertBefore和insertAfter做个总结
JavaScript 使用insertBefore()在某元素的前/后加入元素
thyyyyyyyy的博客
04-30 4120
定义和用法 insertBefore() 方法可以在您指定的已有子节点之前插入新的子节点 用此方法把 <!DOCTYPE html> <html> <body> <p id="demo">这是节点0。<span>这是节点1。</span></p> <button onclick="addText()"&gt...
javascript insertBefore( )
cvper's world !
03-31 6944
js DOM 操作----insertBefore( ) 的用法；含义：在某个元素之前插入一个新的元素；先来写一个带有三个段落的网页：&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;insertBefore()&lt;/title&
JS insertBefore
Truong的专栏
03-22 1606
语法： oElement = object . insertBefore ( oNewNode , oChildNode ) 参数： oNewNode :　 必选项。对象(Element)。要被插入文档结构的对象。 oChildNode :　 可选项。对象(Element)。定位插入点。 oNewNode 被插入到紧贴这个子对象的前面。 返回值： oElement :　 对象(El
javascript当中insertBefore的用法
mark_to_win的专栏
03-29 1648
例 1.3（insertBeforeIEFF.html）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>&l...
JavaScript中appendChild与insertBefore详细解析
JavaScript 中的 AppendChild 和 InsertBefore 是用来操作 DOM 元素的两个常用方法。这两个方法在网页开发中经常被用到，可以动态地向页面中插入新的元素或者调整元素的位置。在本文中，将对这两个方法的用法进行...
js AppendChild与insertBefore用法详细对比
10-26
总结来说，appendChild()与insertBefore()都是JavaScript中用于添加DOM节点的重要方法。appendChild()简单易用，适用于在子节点列表末尾添加节点。而insertBefore()更为灵活，能够在列表中的任意位置插入节点。在...
javascript 之 insertBefore insertAfter
06-29 246
这几天需要用到对HTML节点元素的删/插操作，由于用到insertBefore方法的时候遇到了一些麻烦，现在作为知识的整理，分别对 appendChild、insertBefore和insertAfter做个总结 appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes arra...
javascript中的insertBefore和appendChild以及insertAfter(DOM中是没有提供的)
qq_38613228的博客
02-11 713
一、Node.insertBefore()     Node.insertBefore()方法在参考节点之前插入一个拥有指定父节点的子节点，如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当前位置移动到新位置（在将节点附加到其他节点之间，不需要从其父节点删除该节点）。     意味着一个节...
JS(JavaScript)插入节点的方法appendChild与insertBefore
weixin_34192732的博客
11-10 302
首先 从定义来理解 这两个方法： appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild) insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild) 相同之处：插入子节点 不同之处：实现原理方法不同。 　　　　　appendChild...
javascript中insertAfter()和insertBefore()函数
LeapMotion1的博客
12-05 6638
//利用js提供的insertBefore及过滤器nextSibling\parentNode等function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; //如果要插入的目标元素是其父元素的最后一个元素节点，直接插入该元素 //否则，在目标元素的下一个兄弟元
JavaScript 插入节点insertBefore()
景上 的博客
07-01 3950
插入节点insertBefore()insertBefore() 方法可在已有的子节点前插入一个新的子节点。语法: insertBefore(newnode,node);参数: newnode: 要插入的新节点。 node: 指定此节点前插入节点。实现创建一个新li标签，内容为”php”,并将新创建的li插入到内容为HTML的标签前。<!DOCTYPE HTML> <html> <head>
在容器最前面添加DOM元素 parent.insertBefore(new, parent.children[0])
weixin_30237281的博客
11-11 332
//判断容器当前有没有子级元素,如果没有直接appendChild就行了; if (p.children[0]) { p.insertBefore(span, p.children[0]); } else { p.appendChild(span); } 转载于:http...
js insertBefore方法
u012901416的专栏
06-29 849
[size=medium]语法：[/size] [code="js"]oElement = object . insertBefore ( oNewNode , oChildNode )[/code] [size=medium] 参数： oNewNode :　 必选项。对象(Element)。要被插入文档结构的对象。 oChildNode :　 可选项。对象(Element)。定位插...
jQuery before和insertBefore区别
taoerchun的专栏
09-30 4847
jQuery 中利用before和insertBefore可以达到在指定元素前插入指定内容，写法上有区别 先看一个例子： 在toInsertContent前面插入toInsertContent 实现： $('toInsertContent').insertBefore($('.div1')); 或者 $('.div1').before('toInsertCont
javascript 基础 insertAfter与insertBefore
老刘的日志博客
01-08 562
1. parent.insertBefore(newElement,targetElement.nextSibling)他的三部分为 父节点 新节点 目标节点 他会把新节点创建在目标节点之前 需要注意的是 父节点并无需获取 你通过目标节点.parentNode就可以获取 但是js并没有提供插入在目标节点之后的方法 我们可以自己写一个function insertAfter(newElement,t
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值