js在指定div后添加div
在JavaScript中，向指定的div元素后添加一个新的div，可以使用多种方法。以下介绍两种常用的方法，并提供相应的示例代码。
方法一：使用 insertAdjacentElement
insertAdjacentElement 方法允许你在指定的位置插入一个元素。常用的位置包括 'beforebegin'、'afterbegin'、'beforeend' 和 'afterend'。在这里，我们使用 'afterend' 来在目标div之后插入新的div。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>插入Div示例</title>
<style>
.container {
border: 1px solid #000;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="targetDiv" class="container">
这是目标div。
</div>
<script>
// 获取目标div元素
const target = document.getElementById('targetDiv');
// 创建新的div元素
const newDiv = document.createElement('div');
newDiv.className = 'container';
newDiv.textContent = '这是新添加的div。';
// 在目标div之后插入新的div
target.insertAdjacentElement('afterend', newDiv);
</script>
</body>
</html>解释：
- 使用
document.getElementById获取目标div。 - 使用
document.createElement创建一个新的div元素，并设置其内容和样式。 - 使用
insertAdjacentElement('afterend', newDiv)将新div插入到目标div之后。
方法二：使用 parentNode.insertBefore
另一种方法是利用父节点的 insertBefore 方法。通过获取目标div的下一个兄弟节点，将新div插入到该位置。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>插入Div示例</title>
<style>
.container {
border: 1px solid #000;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="targetDiv" class="container">
这是目标div。
</div>
<script>
// 获取目标div元素
const target = document.getElementById('targetDiv');
// 创建新的div元素
const newDiv = document.createElement('div');
newDiv.className = 'container';
newDiv.textContent = '这是新添加的div。';
// 获取目标div的下一个兄弟节点
const nextSibling = target.nextSibling;
// 在目标div之后插入新的div
target.parentNode.insertBefore(newDiv, nextSibling);
</script>
</body>
</html>解释：
- 同样，首先获取目标
div和创建新div。 - 使用
target.nextSibling获取目标div的下一个兄弟节点。 - 使用
parentNode.insertBefore(newDiv, nextSibling)将新div插入到目标div之后。
选择哪种方法？
insertAdjacentElement方法语法更简洁，适用于直接指定插入位置，代码可读性较高。parentNode.insertBefore方法更灵活，适用于需要在特定位置插入元素的复杂场景。
常见问题及解决方法
- 新添加的
div未显示：- 确保新
div的样式（如display属性）没有被设置为none。 - 检查是否有JavaScript错误阻止代码执行。
- 确保新
- 插入位置不正确：
- 确认使用正确的插入位置参数，如
'afterend'。 - 使用浏览器的开发者工具检查DOM结构，确保新
div被正确插入。
- 确认使用正确的插入位置参数，如
- 动态内容未更新：
- 如果是在动态生成的内容中插入
div，确保在内容加载完成后再执行插入操作，可以在window.onload或适当的事件回调中进行。
- 如果是在动态生成的内容中插入
通过以上方法，你可以灵活地在指定的div后添加新的div元素，根据具体需求选择最适合的方法实现。
相关·内容
2回答
我的脚本在实际页面上附加了几个帖子。$.ajax({
对于每一组帖子，我都想使用getScript 'post.<e
浏览 3提问于2014-04-13得票数 0
1回答
加载屏幕在淡出之前加载5秒，并显示主体中的其余div。 现在，主体中的其余div都有自己的动画。问题是当页面加载时，所有的动画都会开始动画。我想要的是，div只有在加载屏幕超时5秒后才开始动画。我试着为每个div添加+ 5s的动画延迟，但有很多div，我认为这不是最好的方法。 这是我用于加载屏幕超时的代码。
浏览 7提问于2020-04-22得票数 1
回答已采纳
3回答
我有一个有文字的div：及其CSS： -webkit-animation: fadein 2s; font-size:70px;我想让div淡入，所以我制作了一个动画fadein，将div的opacity从0更改为0.1 from { opacity: 0; }to { opacity: 0
浏览 6提问于2015-11-06得票数 1
回答已采纳
1回答
我想要一些CSS3或JQuery动画启动，只有当特定的幻灯片显示在我的滑块。它不是我需要帮助的动画，它更清楚如何触发/启动动画只有当幻灯片/父容器消失。timingRun = setInterval(function() { sliderTiming(); },7000);以下是我的HTML： <a class="button" id="pa
浏览 1提问于2015-06-28得票数 0
回答已采纳
下面是我想要实现的一个简单示例： <div style="float:left;"> <div id="mygame"> <
浏览 2提问于2012-06-18得票数 0
回答已采纳
在blaze布局的UI.Compenent.lookup函数的layout.js中，以下错误正在触发：
很难确切地知道是什么导致了这个错误，什么是因为它而不起作用的
浏览 0提问于2014-03-31得票数 4
回答已采纳
2回答
我在我的页面中嵌入了一个很棒的提要。当我只是在div中添加脚本标记时，它显然会在JS的其余部分(在页面底部)之前加载。我想在所有其他js加载完毕后，将这个脚本动态加载到指定的div中。但当我将它与.html()一起使用时，它肯定会破坏页面：$.getScript("http://feeds.delic
浏览 4提问于2011-04-12得票数 3
回答已采纳
如何在Alpine.js中自动隐藏flash消息？(假设我希望它在4秒后消失) <div class="flex mx-auto justify-between left-0 bottom-0 z-40"> <div class="bg-white rounded-lg border-gray
浏览 19提问于2021-10-02得票数 1
回答已采纳
我正试图在第九位注入一个元素。例如，假设我有一个div，div包含4p标记，现在我想在第二位置再注入一个p标记。有可能吗？
浏览 7提问于2016-06-20得票数 2
回答已采纳
1回答
所以我尝试的是，当页面加载时，div上的滚动条显示底部的内容。Skype聊天或Facebook messenger就是一个很好的例子。您在底部键入消息，消息就会出现在底部。到目前为止，我有以下代码：我甚至添加了window.onload
浏览 1提问于2014-06-13得票数 2
有没有办法让popover自动出现在它的父div的范围内？如果不是，我如何克服具有负边距的动态popover放置？ <a href="/sections/edit_section_text/118" class="noprintclass="arrow"></<em
浏览 0提问于2013-02-28得票数 7
回答已采纳
我在一页上有个按钮。当我单击该按钮时，页面向下滚动到指定的目标，然后为该scroll事件添加一个事件侦听器window，但是滚动事件将立即触发，而不是在下次用户滚动时触发。有人能告诉我为什么会发生这种情况，以及在滚动到指定目标后如何向window添加滚动事件吗？我正在使用Firefox 37.0.2
<!-- Enough br tags to make the page h
浏览 3提问于2015-05-02得票数 0
回答已采纳
预期结果:应显示div“测试”，它过去已经起作用了，但不知怎么它停止了工作(我想它在不同的文件中分割html、css和js时就停止了/main.js"></script>main.cssmain.js
浏览 5提问于2022-03-03得票数 -1
回答已采纳
我正在使用一个普通的HTML页面，并希望主题填充我在页面上的表单元素的宽度和高度。
我可以为元素指定类名，以设置它们的样式，或者样式表是否也适用于现有的元素。
浏览 1提问于2019-07-02得票数 0
1回答
我正在使用这个脚本代码，但是它显示了字体blurry.How，它解决了这个问题 console.log("Doc is ready");
var pdf = new jsPDF('portrait', 'mm', 'letter'); pagesplit: true
};
浏览 0提问于2015-11-20得票数 0
我在我的项目中只在一个页面中使用了google charts js库，并且我有外部和全局的页眉和页脚。head标签在head.php文件中，所需的js库也包含在其中。我的页面结构是这样的：require('footer.php');我可以在header.php
浏览 40提问于2015-01-08得票数 0
我正在尝试从这篇文章中创建一个工具提示
我将此添加到我的script.js中 content:'content 1' //newly added item $scope.text = 'Click me';我想把它显示在我的popover.html里
<div<
浏览 0提问于2014-05-21得票数 0
我反复检查并确保我只引用了一次角度JS。在这一点上，我对角JS的使用非常简单。我在布局/母版页中引用了角JS -jquery-ujs // Rails Unobtrusive jQuery Adapterangular <div ng-init="items = <%= items.to_json %>"
浏览 6提问于2016-01-11得票数 3
回答已采纳
我要渲染Vue.js代码，但在LARAVEL5.7中不工作require('.</div> export default { console.log('Component mounted.> </div>
浏览 7提问于2018-11-29得票数 2
回答已采纳
在元素的单击事件上完成了第一个绑定： //actions of function1我希望能够将另一个函数绑定到它
浏览 2提问于2015-03-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
