javascript insertBefore( )

短命女 2022-05-28 06:57 135阅读 0赞

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 的，那么这个时候，只会在末尾插入节点了；

发表评论取消回复

表情：

评论列表（有 0 条评论，135人围观）

还没有评论，来说两句吧...

相关阅读

相关 appendChild+insertBefore：创建和添加节点

创建和添加节点 <!DOCTYPE html> <html lang="en"> <head> <meta charse

曾经终败给现在/ 2023年10月03日 14:51/ 0 赞/ 30 阅读

相关 JavaScript 插入节点insertBefore()

插入节点insertBefore() insertBefore() 方法可在已有的子节点前插入一个新的子节点。语法: insertBefore(newnode,n

╰半橙微兮°/ 2022年09月22日 15:53/ 0 赞/ 167 阅读

相关初学js插入节点appendChild insertBefore使用方法

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。

秒速五厘米/ 2022年08月21日 11:59/ 0 赞/ 156 阅读

相关第一次CODING附parentElement.insertBefore使用详解

2017年新年第一次CODING，遇到问题并解决，放这里做笔记顺便给同样遇到问题的你做参考。另外这篇文章很多都是COPY别人原文的，感谢原作者的文章。 Node.inse

墨蓝/ 2022年07月11日 13:26/ 0 赞/ 178 阅读

相关 javascript insertBefore( )

js DOM 操作----insertBefore( ) 的用法；含义：在某个元素之前插入一个新的元素；先来写一个带有三个段落的网页： <!doctype html>

短命女/ 2022年05月28日 06:57/ 0 赞/ 136 阅读

相关原生js实现jquery的insertBefore 和insertAfter 方法（四）

网上实现类似方法都是针对相应dom节点进行操作，但许多情况下，会拼接好相应html以字符串方式直接插入。前不久做去jquery的时候用到类似方法，这里简单的记录下，直接上

ゝ一世哀愁。/ 2022年05月23日 02:06/ 0 赞/ 249 阅读

相关 insertBefore 的详细用法解析

其中需要注意两点 1.谁去调用此函数 2.函数中的两个参数的意义 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

阳光穿透心脏的1/2处/ 2022年04月24日 10:42/ 0 赞/ 519 阅读

相关 insertBefore的用法

文章目录简介用法参数注意的地方简介 `inserBefore`，顾名思义就知道是“在某个节点之前插入”。而MDN文档的说法

小鱼儿/ 2022年02月22日 06:11/ 0 赞/ 185 阅读

相关 jQuery--插入节点之外部插入（after()、before()、insertAfter()、insertBefore()）详解

1. after()方法： after()方法用于在所匹配的元素之后插入内容，其语法格式如下： $(selector).after(content) $(

蔚落/ 2021年08月14日 01:49/ 0 赞/ 399 阅读

相关 JS--JavaScript节点插入、删除、替换、克隆(appendChild、cloneNode、insertBefore、normalize、removeChild、replaceChild)

操作节点 Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下表： Node类型原型方法说明： <table>

矫情吗；*/ 2021年08月13日 17:13/ 0 赞/ 487 阅读