資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
廣告