开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js 在元素后面添加元素

在 JavaScript 中，在一个元素后面添加另一个元素可以通过多种方法实现，常见的包括 insertBefore、appendChild 结合父节点操作，或者使用现代浏览器支持的 insertAdjacentElement 方法。以下是相关的基础概念、优势、类型、应用场景以及示例代码：

基础概念

DOM（文档对象模型）：JavaScript 通过 DOM 来操作 HTML 文档的结构。每个 HTML 元素都是一个 DOM 节点，可以通过 JavaScript 进行增删改查。

方法类型

使用 insertBefore 方法
使用 appendChild 方法结合父节点
使用 insertAdjacentElement 方法

优势

动态更新页面：无需刷新页面即可更新内容，提高用户体验。
灵活性高：可以根据条件动态添加不同元素。
易于维护：代码结构清晰，便于后期维护和扩展。

应用场景

动态菜单生成：根据用户权限动态添加菜单项。
评论系统：用户提交评论后，实时显示在页面上。
动态表单：根据用户选择动态添加输入字段。

示例代码

假设我们有一个 <div id="parent">，我们想在其内部某个元素后面添加一个新的 <span> 元素。

方法一：使用 `insertBefore`

// 获取父元素
const parent = document.getElementById('parent');

// 创建新元素
const newElement = document.createElement('span');
newElement.textContent = '这是新添加的元素';

// 获取参考节点（在其后插入新元素）
const referenceNode = document.getElementById('referenceElementId');

// 插入新元素
parent.insertBefore(newElement, referenceNode.nextSibling);

方法二：使用 `appendChild` 结合父节点

// 获取父元素
const parent = document.getElementById('parent');

// 创建新元素
const newElement = document.createElement('span');
newElement.textContent = '这是新添加的元素';

// 获取参考节点
const referenceNode = document.getElementById('referenceElementId');

// 在参考节点后面插入新元素
if (referenceNode.nextSibling) {
    parent.insertBefore(newElement, referenceNode.nextSibling);
} else {
    parent.appendChild(newElement);
}

方法三：使用 `insertAdjacentElement`

// 获取参考元素
const referenceElement = document.getElementById('referenceElementId');

// 创建新元素
const newElement = document.createElement('span');
newElement.textContent = '这是新添加的元素';

// 在参考元素的后面插入新元素
referenceElement.insertAdjacentElement('afterend', newElement);

常见问题及解决方法

问题：新添加的元素没有显示出来。

原因：

可能是新元素的样式设置为 display: none。
可能父元素的 overflow 属性设置为 hidden，导致新元素被隐藏。
新元素没有正确插入到 DOM 中。

解决方法：

检查并修改新元素的样式。
确保父元素的 overflow 属性允许显示新元素。
使用开发者工具检查 DOM 结构，确认新元素已正确插入。

通过以上方法和注意事项，你可以灵活地在 JavaScript 中实现元素的动态添加操作。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js 动态添加元素

该例子的样式用的是easyui的样式，看不懂只需把class="easyui-XXX" 删除即可 <div class="fitem" id="urls" st...

19.7K1 0

原生js添加元素

今天做页面使用的mui，因为使用mui情况下无法使用jquery，于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了，真是越活越倒退了，赶紧整理一波。...首先最简单的innerHTML，这个不想多说，入门新手喜欢这么用，但他的缺点也很明显：不管你渲染部分还是全部，始终需要替换原先所有的子元素，也就是需要重复渲染，会增加浏览器压力。...接下来就是正题了，js推荐是这样进行元素添加： 1.创建游离元素节点：let div=document.createElement(“div”); 2.给创建元素添加属性：div.setAttribute...(“class”,”className”);注意setAttribute一次只能设置一条属性 3.创建文本节点:let textNode=document.createTextNode(“需要添加的文本...”)； 4.将文本节点添加到元素节点中div.appendChild(textNode); 5.加元素节点插入文档：Parent.appendChild(div); over 发布者：全栈程序员栈长，转载请注明出处

8.9K2 0

js添加元素方法

1.insertBefore添加元素到指定位置 1 2 3 ...document.getElementById('ul'); //insertBefore //ul.insertBefore(li, ul.children[0]); //insertBefore(要添加的元素...,已添加的元素) ul.insertBefore(li, ul.children[0].nextElementSibling);//添加到指定元素后面 2.appendChild...//本来div节点会被添加到#ul上,但是sel.添加了div,所以#ul没有div节点 sel.appendChild(div); //将原来div的位置添加到 #sel中,原先的会消失 //...,被替换的元素) 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/152064.html原文链接：https://javaforall.cn

8.5K3 0

原生js动态添加元素

charset="UTF-8"> 原生js...动态添加元素 .phone { width: 200px; height: 30px;.../ul> var formId = document.getElementById("form"); // 创建元素...; inputPhone.value = "请输入手机号码"; formId.appendChild(inputPhone); // js...动态添加li var ul = document.getElementById("parentUI"); var li = document.createElement(

6.8K2 0

js算法之添加元素

思路：用slice(0)做出一个新的数组，然后是从index开始截取0个，并且添加item到index的位置.

4.2K1 0

js对象数组添加元素

var namevalArr = { “SUBJECT_ID”:300,

11.4K2 0

原生JS动态添加、删除元素&内容

整理一下原生 js 添加及删除元素和内容的相关知识，供参考。...初始js代码： var container = document.getElementById("container"); var Element = document.getElementById("...} 添加元素：在元素内添加内容：文本内容 innerText container.innerText = '追加的内容'; HTML内容 innerHTML container.innerHTML... = '追加内容为H3标签'; 在原有内容的基础上添加：以HTML为例： container.innerHTML = container.innerHTML + '追加内容为...("h3");//创建一个html标签 ele.appendChild(text);//在标签内添加文字 container.appendChild(ele);//将标签添加到页面中删除元素：移除元素

27.5K4 0

JS中添加元素的方法

最后面增加子元素，父子级关系。 appendto():后面是被插入对象。最后面增加子元素，父子级关系。 prepend():前面是被插入对象。最前面增加子元素，父子级关系。...insertbefore():后面是插入对象。之前加入元素，同级关系。 insertafter():后面是插入对象。之后加入元素，同级关系。结合代码效果应该就比较容易了解了，那就往下滑吧！ js中常用追加元素的几种方法 $(function(){ //append(),在父级最后追加一个子元素 $(".append").click...='three'>我是子元素appendTo").appendTo($("#wrap")); }); //prepend(),在父级最前面追加一个子元素

9.8K1 0

JS向数组添加元素，插入数据

js中对于数组的操作很常见，下面记录一下js向数组添加元素的方法。...myArray=[11,22,33]; console.log('原数组：',myArray); myArray.push(44,55); console.log('用push在数组后面插入元素...：',myArray); myArray.unshift(66,77); console.log('用unshift在数组前面插入元素：',myArray); myArray.splice...(2,0,'肾虚少年'); console.log('用splice在数组指定位置插入元素：',myArray); 通过使用push以及unshift即可向数组插入元素，如果要在指定的位置插入元素则可以用...splice,splice接收多个参数，分别是索引，要删除的元素个数，新加的元素(可多个，用逗号隔开)；这样即可向数组插入元素了。

10.4K1 0

js 给元素添加自定义属性

给元素添加自定义属性 obj.setAttribute('attr_name','attr_value'); //例如obj.setAttribute('class','snow-container'...) 给元素添加class属性的三种方法 document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的 document.getElementsByTagName...('body')[0].className += 'snow-container'; //在原来的后面加这个 document.getElementsByTagName('body')[0].classList.add

9.1K2 0

js操作DOM在父元素中的结尾添加子节点注意

impressionHtml=``; document.getElementById("wrapper").appendChild(impressionHtml); js...向父元素wrapper中的末尾添加定义好的html，报错： Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter...在stackoverflow上找到很好的一个解释： ? 所以js是不能直接传入字符串的，但是jquery的append可以直接传入html字符串。

9.9K4 0

链表----在链表中添加元素详解

2.2 如在链表头添加一个666元素则需要先将666放进一个节点里，在节点里存入这个元素以及相应的next。 ?...2.3 在链表头添加新元素的相关代码 //在链表头添加新的元素e public void addFirst(E e) { Node node = new Node(e);...(E e) { head = new Node(e, head); size++; } 2.4 在链表中间添加元素假设初始链表为： ?...通过第一步、第二步即可将新元素插入到索引为2的地方。从上不难看出，对于在链表中添加元素关键是找到要添加的节点的前一个节点，因此对于在索引为0的节点添加元素就需要单独处理。...关于在链表中间添加元素的代码： //在链表的index(0--based)的位置添加新的元素e (实际不常用，练习用) public void add(int index, E e)

2.7K3 0

js向数组指定位置添加元素

规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 howmany 必需。规定应该删除多少元素。必须是数字，但可以是 “0”。...要添加到数组的新元素返回值 Type 描述 Array 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。...二、JavaScript unshift() 方法 unshift 方法用于向数组的开头添加一个或多个元素，并返回新数组的长度。...要添加到数组的元素序列，使用 , 分隔。提示：unshift 方法将直接修改原数组，并将已经存在的元素顺次地移到较高的下标处，而不像其他很多方法一样得到一个原数组的副本。...该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

8.5K5 0

jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。...- 在被选元素之后插入内容 before() - 在被选元素之前插入内容 ---- jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部...实例 $("p").prepend("在开头追加文本"); 通过 append() 和 prepend() 方法添加若干新元素在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。...实例 $("img").after("在后面添加文本"); $("img").before("在前面添加文本"); 通过 after() 和 before() 方法添加若干新元素 after() 和...; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 }

2.6K2 0

JS示例25-创建元素并添加

"Tom" /> 年龄：添加

2.9K1 0

在JS数组指定位置插入元素

规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。...要添加到数组的新元素返回值 Type 描述 Array 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。...二、JavaScript unshift() 方法 unshift 方法用于向数组的开头添加一个或多个元素，并返回新数组的长度。...要添加到数组的元素序列，使用 , 分隔。提示：unshift 方法将直接修改原数组，并将已经存在的元素顺次地移到较高的下标处，而不像其他很多方法一样得到一个原数组的副本。...该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

6.2K0 0

js添加元素的三种方法

const spe = document.getElementById("spe"); const btn01 = document.getElementById("btn01"); // 新建li元素...var temp = ol.innerHTML; ol.innerHTML = "swans"; ol.innerHTML += temp; } 向有序列表尾部添加选项

3.8K1 0

如何在 JS 中的数组开头添加元素?

作者：Orkhan Jafarov 译者：前端小智来源: dev 今天，我们来一起学习一下如何把元素添加到元素的首个元素。...] console.log(fruits); // Prints ["Apple", "Banana", "Mango"] 3.使用 Array.concat() 我们还可以使用concat()方法在开头连接两个

9.6K2 0

html页面添加元素

await await@qq.com 10000 Delete 添加员工

6.4K1 0

javascript 如何添加元素

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/152086.html原文链接：https://javaforall.cn

1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭