js 在元素之前添加元素
在JavaScript中，如果你想在某个元素之前添加一个新的元素，可以使用多种方法来实现。以下是一些常用的方法：
基础概念
- DOM（Document Object Model）：DOM是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
- 节点（Node）：DOM中的每个部分都是一个节点，包括元素节点、文本节点等。
相关优势
- 灵活性：可以在运行时动态地添加、删除或修改页面内容。
- 交互性：通过JavaScript操作DOM，可以实现丰富的用户交互效果。
类型
- 元素节点：HTML标签对应的节点。
- 文本节点：文本内容对应的节点。
应用场景
- 动态内容生成：根据用户操作或数据变化动态更新页面内容。
- 插件或扩展开发：在现有页面中插入自定义功能模块。
示例代码
假设我们有一个简单的HTML结构：
<div id="container">
<p>原始内容</p>
</div>我们想在<p>元素之前添加一个新的<div>元素，可以使用以下JavaScript代码：
方法一：使用 insertBefore
// 创建新元素
var newElement = document.createElement('div');
newElement.textContent = '新添加的内容';
// 获取目标元素
var targetElement = document.querySelector('#container p');
// 在目标元素之前插入新元素
targetElement.parentNode.insertBefore(newElement, targetElement);方法二：使用 insertAdjacentElement
// 创建新元素
var newElement = document.createElement('div');
newElement.textContent = '新添加的内容';
// 获取目标元素
var targetElement = document.querySelector('#container p');
// 在目标元素之前插入新元素
targetElement.insertAdjacentElement('beforebegin', newElement);可能遇到的问题及解决方法
问题1：元素未找到
原因：指定的元素选择器可能不正确，导致无法找到目标元素。 解决方法：检查选择器是否正确，确保元素的ID或类名无误。
问题2：脚本执行时机不对
原因：如果脚本在DOM完全加载之前执行，可能会导致找不到元素。
解决方法：将脚本放在<body>标签的底部，或者使用DOMContentLoaded事件确保DOM已加载完成。
document.addEventListener('DOMContentLoaded', function() {
// 你的代码放在这里
});通过以上方法，你可以有效地在JavaScript中实现在元素之前添加新元素的操作，并解决可能遇到的一些常见问题。
相关·内容
表单API在任何表单元素的id之前添加单词“编辑”。当我必须在JS中使用元素时，我必须在元素id之前添加“编辑”。例如，如果我有元素$form“咖喱”，那么在drupal_add_js中(‘#编辑-curdate’)；
为什么会这样
浏览 0提问于2012-05-07得票数 1
回答已采纳
这个js对象已经在DOM中创建，并可以在页面上看到。由于不同的原因，在函数出现之前，我无法更改对象“元素”。
我需要添加一个新元素before给定的对象。在DOM中给定的js元素之前，还有其他选项如何添加元素吗？
浏览 0提问于2013-11-25得票数 0
回答已采纳
3回答
： <div id="vB_Editor_QR_cmd_email" class="imagebutton"> </div>我想在这段代码中添加另一个元素>我使用下面的代码
$("#vB_Editor_QR_cmd_insertimage").before("<p>blablablalblablab<
浏览 0提问于2012-02-28得票数 11
回答已采纳
1回答
我需要克隆和附加元素的按钮点击。第一次正确工作，但在其他添加点击它添加2，4，8.元素。我在追加之前调试了元素，它包含一个元素副本，然后单击event激发一个元素。所以我对这种行为有点困惑
var faqc = $('.faqs-container
浏览 2提问于2015-10-16得票数 0
回答已采纳
1回答
在我的当前项目中，我使用角指令来创建自定义的html元素。见下面的例子。banner.js restrict: 'E',<div></div>
问题：有一个java
浏览 2提问于2015-04-27得票数 2
回答已采纳
如果我动态地将表单添加到页面(无论是通过AJAX还是其他JS)，如何在这些元素存在之前将事件侦听器添加到页面加载中？我知道使用jquery绑定到父元素相当容易，如下所示：
$(document).on('blur', 'input', function() {...})但是我不清楚如何使用普通的JS来做这件事，因为addEventListener必须直接应用于元素本身，并且不能指定应该传播事件的父元素</
浏览 34提问于2016-09-27得票数 0
回答已采纳
1回答
我正试图在我的Aurelia应用程序中使用。：
……
在布局html页面中添加了数据选择器库:问题就在这里。据我所知，这个fabric组件依赖于，在<
浏览 0提问于2015-10-07得票数 0
回答已采纳
1回答
我正在使用javascript对页面服务时已经存在的HTML元素进行一些简单的更改(例如更改div元素的背景图像、添加ID等)。当然，这在除IE8之外的每个浏览器中都很好，因为在DOM中似乎没有反映更改，所以当我在JS运行后解析dom时，它找不到我正在寻找的元素。据我所知，要么：
一个争用条件，2个外部Javascripts正在运行，1正在更改按钮并添加ids，另一种是解析dom，寻找特定的元素，当它们同时运行时，第二个元
浏览 3提问于2012-07-24得票数 0
我不明白这个错误是在我的JavaScript中，还是由于我如何输入我的HTML。//targets
let space = document.getElementById/script.js"></script>
<link rel="preconnect"
浏览 3提问于2022-09-05得票数 0
我正在尝试下面的JQuery代码来动态添加元素。此外，我还需要让jquery.min.<em
浏览 0提问于2012-09-13得票数 2
回答已采纳
3回答
我试图在图表下面添加一段文字。但是，似乎Chartist将DOM元素的实际创建推迟到某个未知的未来点。预期：
</p>"
浏览 3提问于2015-10-26得票数 3
4回答
</b>').text('Press');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button>Here<&#x
浏览 10提问于2017-10-06得票数 1
回答已采纳
1回答
可以在某个元素之后添加前缀吗？例如，我将一个超链接添加到一个div中，但是其中已经有一个元素表示为<a id="test">test1</a>。是否可以在test1超链接之后添加test2超链接？
$('div[id='+id+']').prepend('<a id="test">test2</a>'
浏览 4提问于2010-10-08得票数 4
回答已采纳
我发现vis.js非常有用，但现在需要在时间线中使用的范围元素的边缘(开始/结束)中添加自定义的“符号”(向上指示符、向下指示符等)。我可以在其他元素之前添加单独的元素，但是这需要付出更多的努力，堆叠也会受到影响等等。我可以将html文本/符号放置在一个带有css的表中，迫使它位于元素的开头/结尾，但这似乎并不总是正确显示。
浏览 13提问于2019-06-30得票数 0
5回答
我想问一下，我想在ul标记之前添加一个链接，如下代码所示<div class="widget-content"Gallery</a></li><li><a href=
浏览 0提问于2013-07-26得票数 0
回答已采纳
2回答
我试着在后置元素中加入梯度，但这也不起作用。我只想用一种颜色给三角形涂上颜色，但我也需要能把它移到其他地方。
这不是一个重复的问题，在其他答案中，三角形只是在渐变的结束颜色。
浏览 0提问于2016-10-30得票数 0
回答已采纳
在设置了故事簿的storybook-tailwind-dark-mode外接程序后(通过遵循)，我的组件在画布视图中不再以黑暗模式正确显示。组件在文档视图中正确显示，其他组件在画布视图中正确显示，因此并非每个组件都存在此问题。
在页面变为空白之前，这些元素在一瞬间是可见的。在检查页面时，我可以看到所有的元素都在那里，但它们只是不可见。HTML的唯一区别似乎是添加到body元素中的b
浏览 10提问于2022-11-07得票数 0
2回答
我们正在使用jquery动态插入的元素进行自动完成(以前对静态元素做过自动完成)。下面是插入的一个自动完成添加元素的html源代码(可能有多个元素插入在同一个页面上)。插入元素的id在插入之前是未知的。ids因元素而异：
<input type="text" size="50" placeholder="Enter keyword" name=&quo
浏览 5提问于2014-10-23得票数 0
回答已采纳
3回答
我在这个div之前添加了一些内容元素 blablabla我的js：
$('<p class="comment"> test <small> date </small></p>').insertBefore('#before_this').find('.comment&#
浏览 1提问于2013-05-26得票数 1
回答已采纳
我正在使用android WebView并修改JS DOMContentLoaded事件中的一些元素可见性(document.getElementById('someid').style.display然而，WebView在触发 DOMContentLoaded之前执行呈现，我可以看到元素可见，然后它就隐藏了。如何防止Android WebView在激发DOMContentLoaded之前呈现元素？还有其他JS事件
浏览 2提问于2016-09-05得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
