原生 js 追加 html 字符串

引入jq太笨重，原生js有没有jq的append那样可以直接插入html标签字符串的方法呢？答案是肯定的！

element.insertAdjacentHTML(position, text);

position是相对于element元素的位置，并且只能是以下的字符串之一：

  1. beforebegin：在 element 元素的前面。
  2. afterbegin：在 element 元素的第一个子节点前面。
  3. beforeend：在 element 元素的最后一个子节点后面。
  4. afterend：在 element 元素的后面。

text是字符串，会被解析成 HTML 或 XML，并插入到 DOM 树中。

<div id="one">one</div>

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); 

// 此时，新结构变成：
<div id="one">one</div>
<div id="two">two</div>

参考Element.insertAdjacentHTML()

参考博客：https://segmentfault.com/q/1010000007420031?_ea=1341003

评论