数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在两个现有 HTML 元素之间添加一个新的 HTML 元素？
本文介绍如何在两个已存在的 HTML 元素之间添加一个新的 HTML 元素。这是创建网页时的一项常见任务，可以通过几个简单的步骤实现。我们将使用 JavaScript API 来访问和操作网页上的元素。
本文将要执行的任务是在一个元素之后、另一个元素之前添加一个 HTML 元素。为此，我们将使用 insertBefore() 方法。
使用 insertBefore() 方法
Node 接口的 insertBefore() 方法将一个节点作为给定父节点的子节点放置在参考节点之前。如果该节点已存在于文档中，insertBefore() 会将其转移到新的位置。
语法
以下是 insertBefore() 的语法：
insertBefore(newNode, referenceNode)
为了更好地了解如何在两个现有元素之间添加一个新的 HTML 元素，让我们看下面的例子。
示例
在下面的示例中，我们正在运行一个脚本，用于在两个现有元素之间添加一个新的 HTML 元素。
<!DOCTYPE HTML>
<html>
<body>
<style type="text/css">
#tutorial {
background-color: lightblue;
}
</style>
<hr id="tutorial1">
<p id="tutorial2"> Welcome To TutorialsPoint</p>
<span>The Best E Learning Platform</span>
<hr/>
<script>
const statement = document.getElementById('tutorial1')
let next = statement.nextSibling
const div = document.createElement('div')
statement.parentNode.insertBefore(div, next)
div.setAttribute('id', 'tutorial')
while (next) {
let node = next
next = next.nextSibling
div.appendChild(node)
if (!next || next.nodeName == 'null') break
}
</script>
</body>
</html>
当脚本执行时，它将生成一个包含文本的输出，该文本将在两个元素之间显示，并应用 CSS 样式并在网页上显示。
示例
考虑下面的示例，我们使用 insertBefore() 方法运行脚本。
<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
<ol id="tutorial">
<li>RX100</li>
<li>DUCATI</li>
</ol>
<script>
const tutorial = document.createElement("li");
const add = document.createTextNode("CARS");
tutorial.appendChild(add);
const list = document.getElementById("tutorial");
list.insertBefore(tutorial, list.children[1]);
</script>
</body>
</html>
运行上述脚本后，输出将弹出，显示使用 insertBefore() 方法添加到提供的列表之间的列表项“cars”，并在网页上显示。
示例
执行下面的脚本，观察我们将如何使用 insertBefore() 添加 HTML 元素。
<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
<h1>Click on the button to insert anelement before Monkey</h1>
<ul id="tutorial">
<li>Monkey</li>
<li>Donkey</li>
</ul>
<button onclick="insertelement()">Insert Element</button>
<script>
function insertelement() {
var statement= document.createElement("li");
var add = document.createTextNode("Pegion");
statement.appendChild(add);
var list = document.getElementById("tutorial");
list.insertBefore(statement, list.childNodes[1]);
}
</script>
</body>
</html>
当脚本执行时，它将生成一个包含列表项以及网页上点击按钮的输出。当用户点击按钮时，HTML 元素将被插入。
更新于: 2023年4月21日
123 次浏览
广告