使用JavaScript在元素之前或之后插入HTML字符串

JavaScript的Element.insertAdjacentHTML()方法允许您在指定元素的不同位置插入HTML字符串。其中一个最常见的用例是在指定元素的开始之前或之后插入HTML字符串。

在元素之前插入HTML字符串

对应于在指定元素的开始之前插入HTML字符串的位置是'beforebegin'。您可以使用Element.insertAdjacentHTML()和此位置一起，在指定元素的开始之前插入给定的HTML字符串。

const insertBefore = (el, htmlString) =>
  el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>');
// <p>before</p> <div id="myId">...</div>

在元素之后插入HTML字符串

类似地，要在指定元素的开始之后插入HTML字符串，您可以使用Element.insertAdjacentHTML()和位置'afterend'。

const insertAfter = (el, htmlString) =>
  el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>');
// <div id="myId">...</div> <p>after</p>