資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 JavaScript 文件中指定位置插入指定的 HTML 文字？
在本文中，我們將學習如何使用合適的示例在 JavaScript 文件中的指定位置插入指定的 HTML 文字。
JavaScript 中存在一種方法，可以將指定的 HTML 文字插入到 JavaScript 文件中的指定位置，即 **insertAdjacentHTML()** 方法。共有四個指定合法位置。第一個位置是“afterbegin”，第二個是“afterend”，第三個是“beforebegin”，第四個合法位置是“beforeend”。
讓我們在下面的示例中使用上面討論的指定合法位置。
語法
使用 **insertAdjacentHTML()** 方法將指定的 HTML 文字插入到指定位置的語法如下：
element.insertAdjacentHTML(position, text);
其中，
**元素** 是需要插入其他元素的 HTML 元素 (<a>，<p>，<strong>，<span>)。
**位置** 是需要新增文字的位置。有四個選項：beforebegin、afterbegin、beforeend、afterend。
**文字** 是要新增的文字。
示例 1
這是一個示例程式，演示如何在 JavaScript 文件中使用 beforebegin 將指定的 HTML 文字插入到指定位置。
<!DOCTYPE html>
<html>
<head>
<title>Insert a specified HTML text into a specified position in the JavaScript document?</title>
</head>
<body style="text-align: center;">
<h4>Inserting a specified HTML text into a specified position in the JavaScript document using insertAdjacentHTML()</h4>
<p id="p1" >Success is the child of audacity.</p>
<p id="p2" >Success is never accidental.</p>
<p id="p3">Applause waits on success.<
var node = document.getElementById('p2');
node.insertAdjacentHTML("beforebegin","<p>Success is dependent on effort.</p>"); // Inserting the text at the end of p tag with id="p2"
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 2
這是一個示例程式，演示如何在 JavaScript 文件中使用 **afterbegin** 將指定的 HTML 文字插入到指定位置。
<!DOCTYPE html>
<html>
<head>
<title>Insert a specified HTML text into a specified position in the JavaScript document?</title>
</head>
<body style="text-align: center;">
<h4>Inserting a specified HTML text into a specified position in the JavaScript document using insertAdjacentHTML()</h4>
<p id="p1" >Success is the child of audacity.</p>
<p id="p2" >Success is never accidental.</p>
<p id="p3">Applause waits on success.</p>
<script>
var node = document.getElementById('p2');
node.insertAdjacentHTML("afterbegin","<p>Success is dependent on effort.</p>"); // Inserting the text at the end of p tag with id="p2"
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 3
這是一個示例程式，演示如何在 JavaScript 文件中使用 **beforeend** 將指定的 HTML 文字插入到指定位置。
<!DOCTYPE html>
<html>
<head>
<title>Insert a specified HTML text into a specified position in the JavaScript document?</title>
</head>
<body style="text-align: center;">
<h4>Inserting a specified HTML text into a specified position in the JavaScript document using insertAdjacentHTML()</h4>
<p id="p1" >Success is the child of audacity.</p>
<p id="p2" >Success is never accidental.</p>
<p id="p3">Applause waits on success.</p>
<script>
var node = document.getElementById('p2');
node.insertAdjacentHTML("beforeend","<p>Success is dependent on effort.</p>"); // Inserting the text at the end of p tag with id="p2"
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 4
這是一個示例程式，演示如何在 JavaScript 文件中使用 **afterend** 將指定的 HTML 文字插入到指定位置。
<!DOCTYPE html>
<html>
<head>
<title>Insert a specified HTML text into a specified position in the JavaScript document?</title>
</head>
<body style="text-align: center;">
<h4>Inserting a specified HTML text into a specified position in the JavaScript document using insertAdjacentHTML()</h4>
<p id="p1" >Success is the child of audacity.</p>
<p id="p2" >Success is never accidental.</p>
<p id="p3">Applause waits on success.</p>
<script>
var node = document.getElementById('p2');
node.insertAdjacentHTML("afterend","<p>Success is dependent on effort.</p>"); // Inserting the text at the end of p tag with id="p2"
</script>
</body>
</html>
789 次瀏覽
