JavaScript insertAdjacentHTML() 方法

2025年3月18日 | 阅读 5 分钟

Element 接口的 insertAdjacentHTML() 方法将给定的文本转换为 HTML 或 XML，并将生成的节点插入到 DOM 树的预定位置。

使用 insertAdjacentHTML() 方法将文本作为 HTML 文件插入到 DOM 的某个特定位置。使用此技术可以更改或添加 HTML 中的文本。

语法

下面的语法详细说明了该方法及其参数。

参数

以下两个参数及其子部分展示了该方法的使用情况。

1) position

一个字符串，指示元素相对于字符串的位置。它必须是以下字符串之一

i) "beforebegin"

在元素之前使用“beforebegin”。仅当元素具有父元素且位于 DOM 树中时才为真。

ii) "afterbegin"

“afterbegin”紧跟在元素的首个子节点之后使用。

iii) "beforeend"

“beforeend”紧跟在元素的最后一个子节点之后使用。

iv) "afterend"

在元素之后，“afterend”位置对该函数有效。仅当元素具有父元素且位于 DOM 树中时才为真。

2) text

文本将被转换为 HTML 或 XML 并添加到树中。

返回值

返回已更改的网页。有四个可能的合法位置值。

示例

示例展示了使用位置和文本对该方法的多种操作。

示例 1

下面的程序使用 JavaScript insertAdjacentHTML() 方法的 afterbegin 位置以及特定文本。在这里，我们可以使用简单的位置和文本。

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 250px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Online Portal </h3>
<h2> TpointTech ! </h2>
<h4 id = "maindata">
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
var datas = document.getElementById("maindata");
//use the afterbegin position for text
datas.insertAdjacentHTML("afterbegin",
"<span style = 'color:grey; " +
"background-color: yellow; " +
"width: 50%;'> You Can Learn </span>");
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("afterbegin",
"<span style = 'color : grey; " +
"background-color: yellow; " +
"width: 50%;'>  Welcome to </span>");
}
</script>
</body>
</html>

输出

插入到网页中的 afterbegin 数据如下图所示。

示例 2

下面的程序使用 JavaScript insertAdjacentHTML() 方法的 afterend 位置以及特定文本。

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 250px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Online Portal </h3>
<h2 id = "maindata"> TpointTech ! </h2>
<h4>
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
var datas = document.getElementById("maindata");
//use the afterend position for text
datas.insertAdjacentHTML("afterend",
"<center> <span style = 'color :navy; " +
"background-color : yellow; " +
"width: 50%;'> You Can Learn </span> </center>");
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("afterend",
"<center> <span style = 'color : navy; " +
"background-color : orange; " +
"width: 50%;'>  Welcome to </span> </center>");
}
</script>
</body>
</html>

输出

插入到网页中的 afterend 数据如下图所示。

Example3

下面的程序使用 JavaScript insertAdjacentHTML() 方法的 beforebegin 位置以及特定文本。

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 250px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Online Portal </h3>
<h2 id = "maindata1"> TpointTech ! </h2>
<h4 id = "maindata">
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
var datas = document.getElementById("maindata");
//use beforebegin position for text
datas.insertAdjacentHTML("beforebegin",
"<center> <span style = 'color :navy; " +
"background-color : yellow; " +
"width: 50%;'> You Can Learn </span> </center>");
var datas3 = document.getElementById("maindata1");
datas3.insertAdjacentHTML("beforebegin",
"<center> <span style = 'color : navy; " +
"background-color : aqua; " +
"width: 50%;'>  of </span> </center>");
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("beforebegin",
"<center> <span style = 'color : navy; " +
"background-color : orange; " +
"width: 50%;'>  Welcome to </span> </center>");
}
</script>
</body>
</html>

输出

插入到网页中的 beforebegin 数据如下图所示。

Example4

下面的程序使用 JavaScript insertAdjacentHTML() 方法的 beforeend 位置以及特定文本。

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 200px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Welcome To Online Portal </h3>
<h2 id = "maindata"> TpointTech ! </h2>
<h4 id = "value">
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
var datas = document.getElementById("maindata");
//use beforeend position for text
datas.insertAdjacentHTML("beforeend",
"<center> <span style = 'color :navy; " +
"background-color : yellow; " +
"width: 50%;'> You Can Learn </span> </center>");
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("beforeend",
"<center> <span style = 'color : navy; " +
"width: 50%;'>  Of </span> </center>");
}
</script>
</body>
</html>

输出

插入到网页中的 beforeend 数据如下图所示。

示例 5

下面的程序使用 JavaScript insertAdjacentHTML() 方法来使用所有位置以及特定文本。

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 250px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Online Portal </h3>
<h2 id = "maindata1"> TpointTech ! </h2>
<h4 id = "maindata">
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
//use beforeend position for text
var datas = document.getElementById("maindata1");
datas.insertAdjacentHTML("beforeend",
"<center> <span style = 'color :green; " +
"width: 50%; font-size : 10px;'> Mode:website (reading) </span> </center>");
//use the afterbegin position for text
var datas = document.getElementById("maindata");
datas.insertAdjacentHTML("afterbegin",
"<center> <span style = 'color :navy; " +
"background-color : yellow; " +
"width: 50%;'> You Can Learn </span> </center>");
//use the afterend position for text
var datas3 = document.getElementById("data");
datas3.insertAdjacentHTML("afterend",
"<center> <span style = 'color : navy; " +
"background-color : aqua; " +
"width: 50%;'>  of </span> </center>");
//use beforebegin position for text
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("beforebegin",
"<center> <span style = 'color : navy; " +
"background-color : orange; " +
"width: 50%;'>  Welcome to </span> </center>");
}
</script>
</body>
</html> 

输出

图片展示了 javascript insertAdjacentHTML 方法的信息。

支持的浏览器

JavaScript 中的 DOM insertAdjacentHTML() 方法支持以下浏览器及其版本：

Google Chrome 1.0 版本
Edge 17.0 版本
Internet Explorer 4.0 版本
Firefox 8.0 版本
Opera 8.0 版本
Safari 4.0 版本

结论

JavaScript insertAdjacentHTML 方法作为文档对象方法用于网页。它通过函数或事件插入单个或多个文本。该方法使用多个位置和样式放置信息。它创建用户友好的用户功能，并且最初可以在较小的空间中保存更多数据。

下一个主题如何在 JavaScript 中使用 Console

JavaScript insertAdjacentHTML() 方法

语法

参数

返回值

示例

支持的浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript insertAdjacentHTML() 方法

语法

参数

返回值

示例

支持的浏览器

结论

相关帖子

JavaScript 中的回调地狱 (Callback Hell)

如何使用 JavaScript 使文本变为斜体

JavaScript classList

JavaScript windows getComputedStyle() 方法

JavaScript 中的事件冒泡和捕获

JavaScript 中的柯里化 (Currying)

JavaScript 区分大小写吗？

Base64 解码在 JavaScript 中的用法

使用 JavaScript 遍历数组对象

Javascript 中的 textContent

订阅 Tpoint Tech