javascript insertBefore( )

最新推荐文章于 2024-05-16 04:24:19 发布
最新推荐文章于 2024-05-16 04:24:19 发布
阅读量6.8k 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： js  insertBefore( ) javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/79770997
版权

js DOM 操作----insertBefore( ) 的用法；

含义：在某个元素之前插入一个新的元素；

先来写一个带有三个段落的网页：

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >insertBefore() </ title >
</ head>
< body>
< p class= "first" >我是第一个 </ p >
< p class= "second" >我是第二个 </ p >
< p class= "third" >我是第三个 </ p >
</ body>
</ html>


接下来我们动态创建一个段落添加到first 和second 之间；

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >insertBefore() </ title >
</ head>
< body>
< p id= "first" >我是第一个 </ p >
< p id= "second" >我是第二个 </ p >
< p id= "third" >我是第三个 </ p >
< script >
window. onload = function (){
var newp = document. createElement ( "p" ); //创建新的节点 p
newp . innerHTML = "我是新加的" ; //给新创建的节点p 添加内容
var second = document. getElementById ( "second" ); // 获取原本的第二个节点p
document.body. insertBefore ( newp , second ); //在第二个节点之前插入新创建的节点
}
< / script >
</ body>
</ html>


我们来看看 insertBefore() 的用法，

document.body.insertBefore(newp,second);

首先document.body是段落的父元素，insertBefore()里面有两个参数，

第一个参数表示要插入的节点，第二参数表示在哪个节点之前插入，

注意，第二个参数是可以为null 的，那么这个时候，只会在末尾插入节点了；

cvper
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js在指定位置增加节点函数insertBefore()用法实例
10-24
主要介绍了js在指定位置增加节点函数insertBefore()用法,实例分析了insertBefore()函数追加结点的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript中的insertBefore和appendChild以及insertAfter(DOM中是没有提供的)
qq_38613228的博客
02-11 485
一、Node.insertBefore()     Node.insertBefore()方法在参考节点之前插入一个拥有指定父节点的子节点，如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当前位置移动到新位置（在将节点附加到其他节点之间，不需要从其父节点删除该节点）。     意味着一个节...
Python 列表 insert()函数使用详解_insert函数
最新发布
2401_84538278的博客
05-16 905
如果你也是看准了Python，想自学Python，在这里为大家准备了丰厚的免费大礼包，带大家一起学习，给大家剖析Python兼职、就业行情前景的这些事儿。
javascript中的insertBefore方法
aiyinsou8550的博客
02-20 490
DEMO1:默认添加在文档的最后 Html代码 <SCRIPTLANGUAGE="JavaScript"> window.onload=function(){ vara=document.createElement("span"); varb=document.createTextNode("cssrain"); ...
JavaScript 使用insertBefore()在某元素的前/后加入元素
thyyyyyyyy的博客
04-30 3772
定义和用法 insertBefore() 方法可以在您指定的已有子节点之前插入新的子节点 用此方法把 <!DOCTYPE html> <html> <body> <p id="demo">这是节点0。<span>这是节点1。</span></p> <button onclick="addText()"&gt...
[js高手之路] dom常用API详解与应用
weixin_33969116的博客
08-23 247
本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用 一、appendChild: 向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最...
JS——appendChild()和insertBefore()插入新节点区别
专注写bug
01-05 1827
文章目录前言appendChild(newchild)insertBefore(newchild, refchild)参考资料 前言 在html中，如果需要动态的插入数据标签(li、a等)，则需要使用到标题所示的appendChild()或insertBefore()来实现。 这两种方法都具有插入新元素至指定的容器中的功能，但他们却有很大的区别。 appendChild(newchild) appendChild()的字面意思append和child，从起名中可以看出，插入元素的位置为末尾。 向当前节点的
javascript 之 insertBefore insertAfter
06-29 190
这几天需要用到对HTML节点元素的删/插操作，由于用到insertBefore方法的时候遇到了一些麻烦，现在作为知识的整理，分别对 appendChild、insertBefore和insertAfter做个总结 appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes arra...
JavaScript之appendChild、insertBefore和insertAfter使用说明
10-28
几天需要用到对HTML节点元素的删/插操作，由于用到insertBefore方法的时候遇到了一些麻烦，现在作为知识的整理，分别对appendChild、insertBefore和insertAfter做个总结
JavaScript：createElement和insertBefore
01-07
obj = document.createElement(tag)创建一个标签，oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入的标签的父节点调用，appendChild将创建的元素依次加在后面，而insertBefore则可以将...
JavaScript
03-16
3. 添加与删除元素：`appendChild`、`removeChild`、`insertBefore`等方法用于元素的动态操作。 JavaScript中的异步编程： 1. 定时器：`setTimeout`和`setInterval`用于延迟执行或周期性执行函数。 2. Ajax...
js insertBefore方法
u012901416的专栏
06-29 779
[size=medium]语法：[/size] [code="js"]oElement = object . insertBefore ( oNewNode , oChildNode )[/code] [size=medium] 参数： oNewNode :　 必选项。对象(Element)。要被插入文档结构的对象。 oChildNode :　 可选项。对象(Element)。定位插...
原生js中的对元素的添加,删除,复制,创建等操作.
xhdjdje的博客
02-19 3533
使用原生js来对元素进行创建,删除,复制,添加等操作
javascript当中insertBefore的用法
qq_44594371的博客
11-18 611
例 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"/&g...
原生js html insert,js中AppendChild与insertBefore的用法详细解析
weixin_39795845的博客
05-31 620
appendChild定义appendChild(newChild: Node) : NodeAppends a node to the childNodes array for the node.Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+添加一个节点到指定的节点的子节点数组中，读起来好象有点拗口...
js追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）...
weixin_33979203的博客
05-05 6424
[html]view plaincopy<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>js中常用追加元素的几种方法</title><linkrel="s...
JavaScript 插入节点insertBefore()
景上 的博客
07-01 3848
插入节点insertBefore()insertBefore() 方法可在已有的子节点前插入一个新的子节点。语法: insertBefore(newnode,node);参数: newnode: 要插入的新节点。 node: 指定此节点前插入节点。实现创建一个新li标签，内容为”php”,并将新创建的li插入到内容为HTML的标签前。<!DOCTYPE HTML> <html> <head>
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
热门推荐
幸福滴嘴角上扬的博客
09-07 17万+
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" h
JavaScript中appendChild与insertBefore详细解析
JavaScript 中的 AppendChild 和 InsertBefore 是用来操作 DOM 元素的两个常用方法。这两个方法在网页开发中经常被用到，可以动态地向页面中插入新的元素或者调整元素的位置。在本文中，将对这两个方法的用法进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值