insertBefore() 方法

最新推荐文章于 2022-11-22 15:25:59 发布
最新推荐文章于 2022-11-22 15:25:59 发布
阅读量2.7k 收藏 5
点赞数 1
分类专栏： JavaScript

XML DOM insertBefore() 方法


定义和用法

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

此方法可返回新的子节点。

语法：

insertBefore(newchild,refchild)
参数 描述
newchild 插入新的节点
refchild 在此节点前插入新节点

HTML DOM insertBefore() 方法


定义和用法

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI。

您也可以使用 insertBefore 方法插入/移动已有元素。


语法

node.insertBefore(newnode,existingnode)

参数

参数 类型 描述
newnode Node 对象 必需。需要插入的节点对象。
existingnode Node object 可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。

返回值

类型 描述
Node 对象。 您插入的节点。

实例：

<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮向列表插入一个项目。</p>

<button οnclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)

var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>

<p><b>注释：</b><br>首先请创建一个 LI 节点，<br>然后创建一个文本节点，<br>然后向这个 LI 节点追加文本节点。<br>最后在列表中的首个子节点之前插入此 LI 节点。</p>

</body>


转自w3school

ssisse
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
insertBefore()方法,
FLY_keep_going
04-14 3095
&lt;/head&gt;&lt;body&gt; insertBefore()方法，这个方法将把一个新元素插入到一个现有元素的前面。在调用此方法时，必须告诉它三件事： 1.想插入的新元素(newElement). 2.想把这个新元素插入到哪个现有元素(targetElement)的前面。 3.这两个共同的父元素(parentElement); 下面是这个方法的调用语法： parentElemen...
insertBefore 的详细用法解析
像一阵风
04-23 6917
其中需要注意两点 1.谁去调用此函数 2.函数中的两个参数的意义
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...
Node对象的insertBefore方法
卡卡的笔录
03-27 5273
var node = parentNode.insertBefore(node, referenceNode) 作用：将node节点插入到referenceNode节点之前，parentNode为对应的父节点。返回值node是插入的node节点本身。 插入新节点 HTML代码 <div id="container"> <h1>标题1</h1>...
insertBefore方法
Br不二
11-22 314
inserBefore方法的介绍，参数，用法，和代码实例
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
10-21
主要介绍了jQuery插入节点和移动节点的方法,结合实例形式分析了insertAfter和insertBefore方法针对页面元素节点操作的使用技巧,需要的朋友可以参考下
初学js插入节点appendChild insertBefore使用方法
10-28
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。
jQuery中insertBefore()方法用法实例
10-24
主要介绍了jQuery中insertBefore()方法用法,实例分析了insertBefore()方法的功能、定义及把匹配的元素插入到另一个指定的元素集合前面的使用技巧,需要的朋友可以参考下
jsDOM基礎insertBefore基本用法
唐昊
03-12 336
<!DOCTYPE html> <html> <head> <title></title> </head> <script type="text/javascript"> window.onload=function(){ var x = document.getElementById('but'); ...
insertBefore()
weixin_30321449的博客
10-31 163
insertBefore()方法将把一个给定的节点插入到一个给定元素节点的给定子节点前面，他返回一个指向新增子节点的引用指针： reference = element.insertBefore(newNode,targetNode); 如上所示，节点newNode将被插入元素节点element并出现在节点targetNode的前面。节点targetNode必须是element元素的一个...
js AppendChild与insertBefore用法详细对比
10-26
本篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的对比。需要的朋友可以过来参考下，希望对大家有所帮助
基于insertBefore制作简单的循环插空效果
12-28
效果图展示： 源码查看 【功能说明】 　　利用insertBefore制作简单的循环插空效果 【HTML代码说明】 <ul class=list id=list> <li class=in>1</li> <li class=in>2</li> <li class=in>3</li> <li class=in>4</li> <li class=in>5</li> <li class=in>6</li> </ul> 【CSS代码说明】 .in{ height: 20px; line-height: 20px; width: 20px;
insertBefore,removeChild,repalceChild的语法和作用
weixin_40442639的博客
03-22 418
1.insertBefore inserBefore，顾名思义就知道是“在某个节点之前插入”。 MDN的定义： 而所谓的“拥有指定父节点”，就是指被参照的节点的父节点就是调用insertBefore方法的节点。 如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当前位置移动到新位置。 参数 newNode：将要插入的节点 referenceNode：被参照的节点（即要...
JavaScript 使用insertBefore()在某元素的前/后加入元素
thyyyyyyyy的博客
04-30 3659
定义和用法 insertBefore() 方法可以在您指定的已有子节点之前插入新的子节点 用此方法把 <!DOCTYPE html> <html> <body> <p id="demo">这是节点0。<span>这是节点1。</span></p> <button onclick="addText()"&gt...
js：插入节点appendChild insertBefore使用方法
weixin_34379433的博客
09-14 246
首先 从定义来理解 这两个方法：appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)相同之处：插入子节点不同之处：实现原理方法不同。　　　　 appendChild 方法是在...
HTML DOM insertBefore() 方法
u010865136的专栏
06-15 1698
一、问题    使用系统自己封装的Validator.js进行表单验证时，错误提示信息的位置不是预期的位置，需要修改底层方法，将错误信息提示在正确的位置；二、分析问题    1、追踪代码，找到Validator.js中控制错误信息的代码：    1、错误提示信息的错误位置    g.parentNode.insertBefore(c, g.nextSibling) **作用：将拼接的错误提...
javascript中insertAfter()和insertBefore()函数
LeapMotion1的博客
12-05 6248
//利用js提供的insertBefore及过滤器nextSibling\parentNode等function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; //如果要插入的目标元素是其父元素的最后一个元素节点，直接插入该元素 //否则，在目标元素的下一个兄弟元
有关insertBefore的使用方法
宁以至远
04-21 3401
    有关insertBefore的使用方法：insertBefore(newDiv, SelectDiv)    在div中可使用该方法，添加一个新的div到指定div的前面，而使用appendChild方法只能将新的层添加到末尾，这样使用更加的灵活，尤其对于需要使用排序的方法的时候，更加的高效。    与此同时，如果是对table的内容进行插入的话，那么如果调用该方法，那么所针对的对
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
element plus 树形控件 axios post请求调接口用insertBefore方法增加节点
最新发布
06-07
Element Plus 的树形控件支持使用 `insertBefore` 方法增加节点，这需要使用到树形控件的 API。同时，如果需要调用后端接口来获取数据，可以使用 axios 发送 POST 请求，获取数据后再通过 API 添加节点。 以下是一个示例代码，用于使用 axios 发送 POST 请求，获取数据并使用 `insertBefore` 方法添加节点到树形控件中： ```html <template> <el-tree :data="treeData" ref="tree" :expand-on-click-node="false"> <template v-slot="{ node, data }"> <span>{{ data.label }}</span> <el-button @click="addChild(node)">添加子节点</el-button> </template> </el-tree> </template> <script> import axios from 'axios'; export default { data() { return { treeData: [], }; }, methods: { addChild(node) { // 发送 POST 请求获取子节点数据 axios.post('/api/getChildren', { parentId: node.id }) .then(response => { // 将子节点添加到当前节点前面 response.data.forEach(child => { this.$refs.tree.insertBefore({ data: child, node: node, }); }); }) .catch(error => { console.error(error); }); }, }, mounted() { // 初始化树形控件数据 axios.get('/api/getTreeData') .then(response => { this.treeData = response.data; }) .catch(error => { console.error(error); }); }, }; </script> ``` 在上面的代码中，我们定义了一个 `addChild` 方法，用于添加子节点。当用户点击添加子节点按钮时，会发送 POST 请求到 `/api/getChildren` 接口，获取子节点数据。然后，我们将每个子节点使用 `insertBefore` 方法添加到当前节点前面。其中，`node` 表示当前节点的数据，`$refs.tree` 是树形控件的引用。 在 `mounted` 生命周期钩子函数中，我们使用 axios 发送 GET 请求，获取树形控件的初始化数据，并将其赋值给 `treeData`。然后，在模板中使用 `v-for` 指令渲染树形控件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值