数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中在指定位置插入指定元素？
本文的任务是在 JavaScript 中在指定位置插入指定元素。
Javascript 提供了 **"insertAdjacentElement()"** 方法来在指定位置插入已存在的元素。共有四个合法的位置。第一个位置是 'afterbegin'（元素开头之后（第一个子元素）），第二个是 'afterend'（元素之后），第三个是 'beforebegin'（元素之前），第四个合法位置是 'beforeend'（元素结尾之前（最后一个子元素））。
如果有多个同名的元素，则使用索引来访问它们，就像访问数组元素一样。
语法
使用 **insertAdjacentElement()** 方法将指定的 HTML 文本插入到指定位置的语法如下：
element.insertAdjacentElement(position, item);
其中：
**Element** 是旧的 HTML 元素（<a>，<p>，<strong>，<span>），需要将其他元素插入到其中。
**Position** 是需要添加文本的位置。有四个选项：beforebegin、afterbegin、beforeend、afterend。
**Item** 是新的 HTML 元素（<a>，<p>，<strong>，<span>），要添加到旧的 HTML 元素中。
示例 1
这是一个示例程序，演示如何在 JavaScript 文档中使用 **beforebegin** 将指定元素插入到指定位置。
<!DOCTYPE html>
<html>
<head>
<title>Insert a specified element in a specified position in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a specified element in a specified position in JavaScript using insertAdjacentElement()</h4>
<p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
<span id="p2"> The roots of education are bitter, but the fruit is sweet. </span>
<p id="p3">Change is the end result of all true learning.</p>
<script>
var ele1 = document.getElementById('p2');
var ele2 = document.getElementById('p3');
ele2.insertAdjacentElement("beforebegin", ele1);
</script>
</body>
</html>
上述示例程序的输出如下：
示例 2
这是一个示例程序，演示如何在 JavaScript 文档中使用 **afterbegin** 将指定元素插入到指定位置。
<!DOCTYPE html>
<html>
<head>
<title>Insert a specified element in a specified position in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a specified element in a specified position in JavaScript using insertAdjacentElement()</h4>
<p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
<span id="p2"> The roots of education are bitter, but the fruit is sweet. </span>
<p id="p3">Change is the end result of all true learning.</p>
<script>
var ele1 = document.getElementById('p2');
var ele2 = document.getElementById('p3');
ele2.insertAdjacentElement("afterbegin", ele1);
</script>
</body>
</html>
上述示例程序的输出如下：
示例 3
这是一个示例程序，演示如何在 JavaScript 文档中使用 **beforeend** 将指定元素插入到指定位置。
<!DOCTYPE html>
<html>
<head>
<title>Insert a specified element in a specified position in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a specified element in a specified position in JavaScript using insertAdjacentElement()</h4>
<p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
<span id="p2"> The roots of education are bitter, but the fruit is sweet. </span>
<p id="p3">Change is the end result of all true learning.</p>
<script>
var ele1 = document.getElementById('p2');
var ele2 = document.getElementById('p3');
ele2.insertAdjacentElement("beforeend", ele1);
</script>
</body>
</html>
上述示例程序的输出如下：
示例 4
这是一个示例程序，演示如何在 JavaScript 文档中使用 **afterend** 将指定元素插入到指定位置。
<!DOCTYPE html>
<html>
<head>
<title>Insert a specified element in a specified position in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a specified element in a specified position in JavaScript using insertAdjacentElement()</h4>
<p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
<span id="p2"> The roots of education are bitter, but the fruit is sweet.</span>
<p id="p3">Change is the end result of all true learning.</p>
<script>
var ele1 = document.getElementById('p2');
var ele2 = document.getElementById('p3');
ele2.insertAdjacentElement("afterend", ele1);
</script>
</body>
</html>
执行以上代码后，将生成以下输出。
2K+ 阅读量
