JS 向DOM中添加元素内容 - insertAdjacentHTML

一直是向dom中追加元素的操作就是,createElement 、appendChild等, 知道发现了更加灵活、方便的  insertAdjacentHTML

 

一、功能

insertAdjacentHTML() 可以将文本解析成 Element 元素，并将结果节点追加到DOM树指定位置，它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快

二、语法

element.insertAdjacentHTML(position, text);

position是指添加到哪个位置 ，并且必须是以下字符串之一：

  • beforebegin: 元素自身的前面
  • afterbegin: 插入元素内部的第一个子节点之前
  • beforeend: 插入元素内部的最后一个子节点之后
  • afterend: 元素自身的后面

text是要被解析为HTML或XML元素，并插入到DOM树中的字符串

三、示例及效果图

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8   </head>
 9 
10   <body>
11     <div id="box">
12       <div>最开始的一句话</div>
13     </div>
14   </body>
15 
16   <script>
17     var str1 = '<div>beforebegin - 插入到元素自身的前面</div>';
18     var str2 = '<div>afterbegin - 插入元素内部的第一个子节点之前</div>';
19     var str3 = '<div>beforeend - 插入元素内部的最后一个子节点之后</div>';
20     var str4 = '<div>afterend - 元素自身的后面</div>';
21     var box = document.querySelector('#box');
22     box.insertAdjacentHTML('beforebegin', str1);
23     box.insertAdjacentHTML('afterbegin', str2);
24     box.insertAdjacentHTML('beforeend', str3);
25     box.insertAdjacentHTML('afterend', str4);
26   </script>
27 
28 </html>

 

效果图：

posted @ 2020-08-16 01:37  九鹤  阅读(2133)  评论(0)  编辑  收藏  举报