資料結構
網路
關係資料庫管理系統
作業系統
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+ 閱讀量
