js 节点插入时候 新节点永远放在第一个位置

最新推荐文章于 2023-07-28 16:30:21 发布
最新推荐文章于 2023-07-28 16:30:21 发布
阅读量1.6k 收藏 2
点赞数 2
分类专栏： 前端htmlcss 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiyi47/article/details/130857000
版权
该文章介绍了如何使用JavaScript的DOM操作，通过`insertBefore`方法将新创建的`div`节点插入到父节点`parent`的第一个孩子之前，实现节点的前插功能。这涉及到了`getElementById`用于获取元素，以及`createElement`用于创建新节点。
摘要由CSDN通过智能技术生成

在 JavaScript 中，可以使用以下代码将节点插入到第一个位置：

var parent = document.getElementById("parent");
var newChild = document.createElement("div");
parent.insertBefore(newChild, parent.firstChild);

这段代码首先获取父节点 parent，然后创建一个新的子节点 newChild。最后，使用 insertBefore() 方法将新节点插入到父节点的第一个位置，即 parent.firstChild。

更多关于 JavaScript 中节点插入的知识，可以参考以下链接：

小墨蛇
关注
专栏目录
（23）使用DOM插入新元素，每次插入的新节点放在最前面
虚心求学_一点一滴
07-18 8334
<!-- DOM创建元素，①创建li，②再插入相应的父级中去， -->  window.onload=function () { var oBtn=document.getElementById('btn1'); var oU1=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'
JS(JavaScript)插入节点的方法appendChild与insertBefore
weixin_34192732的博客
11-10 259
首先 从定义来理解 这两个方法： appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild) insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild) 相同之处：插入子节点 不同之处：实现原理方法不同。 　　　　　appendChild...
js 添加和添加到最前面的方法
wuhuajun_123456的博客
11-01 2365
js 添加和添加到最前面的方法
Js 将元素放到现有数组/集合的第一个位置
qq_25983579的博客
02-24 3723
主要是为了加深一下自己的印象： 实例 将新项添加到数组起始位置: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple"); fruits 将输出： Lemon,Pineapple,Banana,Orange,Apple,Mango 参考链接:https://blog....
js 在数组后面插入元素 或者插入到第一个
最新发布
weixin_43250628的博客
07-28 1657
js 在数组后面插入元素 或者插入到第一个
js数组置顶元素（将某一项移到首位）
张木期的博客
10-28 7737
js数组置顶元素（将某一项移到首位）
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
这个方法需要两个参数：第一个是要插入的新节点，第二个是已存在的子节点。在`showesideinsert()`函数中，`str.insertBefore(strNode, strBrother);`将创建的`<p>`元素插入到第二个子节点之前。 知识点6：使用事件...
jQuery和JavaScript节点插入元素的方法对比
10-21
对比jQuery和JavaScript节点插入的方法，我们可以看到jQuery的API设计更符合直观的思维模式，且语法更简洁易懂。而原生JavaScript虽然在操作上稍显复杂，但灵活性和控制度更高，且不依赖于jQuery库，有助于减轻页面...
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
10-18
- `querySelector(selector)`：根据CSS选择器返回匹配的第一个节点。 - `querySelectorAll(selector)`：返回匹配CSS选择器的所有节点的NodeList。 在实际应用中，这些方法经常组合使用，例如在遍历DOM树时，可能...
jquery插入兄弟节点的操作方法
10-20
在描述中提到的实例中，`$self.prepend($selectLi)` 将`$selectLi`元素插入到`$self`元素的最前面，使得`$selectLi`成为`$self`的第一个子元素，而`$self`本身的位置保持不变。 2. **`after()`** 方法： `after()`...
JS数组的常用方法
wdhxs的博客
09-09 233
1.splice（） ！注意：splice函数会改变原数组。 例子 1 在本例中，我们将创建一个新数组，并向其添加一个元素： <script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "&lt
js创建节点、添加节点
qq_40937541的博客
02-18 4277
创建节点：document.createElement("li") 在后面添加节点：node.appendChild(child) node父级 child 子级 在前面添加节点：node.insertBefore(child,指定元素) node父级 child 子级 <body> <ul> <li>123</li> </ul> <script> var ul = document.q
js 原生将元素插入到父元素首位，jquery和原生两种方式
业余前端的职业经历
03-08 7297
一般来说我们新加的元素会放置到父元素的首位 但也有放到首位的那种可能，每次追加元素 放到最前面 业务还是有这种需求的 可能 用jquery的童鞋 会对 append 这个方法很熟悉 当然 用框架的童鞋 就不用考虑这个问题了 直接就是数据驱动 的 直接关注数据业务层就行了 少去了很多麻烦 这里就讲解下 js原生 和jq两种方式 将元素插入到首位吧 写之前 先声明下 dom结构吧 <div class="parent"> <h1>hello worl...
js对象
weixin_44873946的博客
09-26 125
JavaScript(JS)的基本对象() 目录JavaScript(JS)的基本对象()一、Function：函数(方法)对象二、 Array:数组对象三、 Boolean四、 Date：日期对象五、 Math：数学对象六 Number七. String八. RegExp：正则表达式对象九、Global 一、Function：函数(方法)对象 1. 创建的方式： ...
通过JS增加节点来增加内容到原内容之前
zsf0615020117的专栏
08-29 901
             insertBefore() Example                    function insertMessage() {                var oNewP = document.createElement("p");                var oText = document.createTextNode("Hello Univ
原生JS如何在在指定位置插入元素，前面、后面
u010362468的博客
11-05 5608
element.insertAdjacentHTML(position, text); position 是相对于 element 元素的位置，并且只能是以下的字符串之一： beforebegin：在 element 元素的前面。 afterbegin：在 element 元素的第一个子节点前面。 beforeend：在 element 元素的最后一个子节点后面。 afterend：在 element 元素的后面。 text 是字符串，会被解析成 HTML 或 XML，并插入到 DOM 树中。 // one
JavaScript笔记34_创建新节点并插入到某节点前面
qqq777_的博客
03-02 1854
将“广州”节点插入到bj前面 myClick("btn02",function(){ //创建广州节点 var li=document.creatElement("li"); var gzText=document.creatTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj=document.getElementById("bj"); //获取city var city=document.getElementById("city"); /
DOM ------ 子节点第一个元素和最后一个元素
HuoZhiyan 的博客
02-09 654
对于ol标签下有li标签 常用写法(返回子元素): 子节点第一个元素: ol.children[0] 子节点最后一个元素: ol.children[ol.children.length - 1] 不常用写法(返回文本/元素节点): 第一个子节点: ol.firstChild 最后一个子节点: ol.lastChild 不常用写法(返回子元素IE9+): 子节点第一个元素 ol.firstElementChild 子节点最后一个元素: ol.lastElementChild //html代码 <
js 插入一条数据（元素开头插入内容/ 元素的结尾插入内容）
jhaaai的博客
11-10 4947
js插入节点   1. 元素开头插入内容：prepend. function prependText(){ var txt1="&lt;p&gt;Text.&lt;/p&gt;"; //使用HTML创建文本 $("p").prepend(txt1); // 插入新元素 } 如果是插入一个ol li标签（如果插入的数据是变量，注意要加连接符 ‘+’）...
js使用insertAdjacentElement往目标节点第一个位置插入dom
05-28
可以使用以下代码将DOM元素插入到目标节点的第一个位置： ```javascript // 获取目标节点 const targetNode = document.getElementById('target'); // 创建新的DOM元素 const newElement = document.createElement('div'); newElement.textContent = '这是新的DOM元素'; // 将新的DOM元素插入到目标节点的第一个位置 targetNode.insertAdjacentElement('afterbegin', newElement); ``` 在上面的代码中，`insertAdjacentElement`方法的第一个参数是用于指定插入位置的位置字符串，可以是以下四个值之一： - `beforebegin`：在目标节点之前插入DOM元素 - `afterbegin`：在目标节点内部的第一个子节点之前插入DOM元素 - `beforeend`：在目标节点内部的最后一个子节点之后插入DOM元素 - `afterend`：在目标节点之后插入DOM元素 第二个参数是要插入的DOM元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值