数据结构
网络
关系数据库管理系统 (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 次浏览
