JS DOM 编程复习笔记 -- insertAdjacentHTML（九）

最新推荐文章于 2023-08-22 14:49:56 发布

小帅的编程笔记

最新推荐文章于 2023-08-22 14:49:56 发布

阅读量163

点赞数

分类专栏：小帅的编程笔记

本文链接：https://blog.csdn.net/cmdfas/article/details/120959008

版权

javascript html 前端

小帅的编程笔记专栏收录该内容

117 篇文章 4 订阅

订阅专栏

今天我们来复习最后一个关于DOM操作的API，insertAdjacentHTML()，用来将HTML插入到页面中。同样还有两个差不多的方法，insertAdjacentElement()和insertAdjacentText()，他们的用法差不多，只是第二个参数有些区别。

语法

insertAdjacentHTML() 是 Element 接口的一个方法，任何元素都可以调用。

insertAdjacentHTML() 方法解析一段 HTML 文本并将结果节点插入到 DOM 树的指定位置。

element.insertAdjacentHTML(positionName, text);

1) position

positionName 是一个字符串，表示相对于元素的位置。 positionName 接受以下四个值之一：

'beforebegin': 在元素之前
'afterbegin': 在元素的第一个子元素之前
'beforeend': 在元素的最后一个子元素之后
'afterend': 在元素之后

注意，'beforebegin'和'afterend'仅在元素位于 DOM 树中并且具有父元素时才可用。

insertAdjacentHTML()方法没有返回值。

下面代码注释说明了每个参数所在的位置

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

2) text

text 参数是一个字符串，insertAdjacentHTML() 方法将其解析为 HTML，和innerHTML差不多。

安全问题

与innerHTML 一样，如果需要把用户输入传递到insertAdjacentHTML() 方法中，则应始终对其进行转义来避免安全风险。

使用例子

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>insertAdjacentHTML() Demo</title>
 </head>
 <body>
   <ul id="list">
     <li>CSS</li>
   </ul>

   <script>
     let list = document.querySelector('#list');

     list.insertAdjacentHTML('beforebegin', '<h2>Web 前端必备技能</h2>');
     list.insertAdjacentHTML('afterbegin', '<li>HTML</li>');
     list.insertAdjacentHTML('beforeend', '<li>JavaScript</li>');
     list.insertAdjacentHTML('afterend', '<p>更多知识等你学习</p>');
   </script>
 </body>
 </html>

输出的HTML结构为

<h2>Web 前端必备技能</h2>

<ul id="list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<p>更多知识等你学习</p>

最后

这个方法可能使用的比较少，大家有用过这个方法吗？

如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新

小帅的编程笔记

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS DOM 编程复习笔记 -- insertAdjacentHTML（九）

今天我们来复习最后一个关于DOM操作的API，insertAdjacentHTML()，用来将HTML插入到页面中。同样还有两个差不多的方法，insertAdjacentElement()和insertAdjacentText()，他们的用法差不多，只是第二个参数有些区别。语法insertAdjacentHTML() 是 Element 接口的一个方法，任何元素都可以调用。insertAdjacentHTML() 方法解析一段 HTML 文本并将结果节点插入到 DOM 树的指定位置。element.
复制链接

扫一扫