在元素后插入

在编写前端页面时，我们经常需要在某个元素后面插入新的元素或内容。使用 JavaScript 可以轻松实现此功能。

在元素后插入新元素

要在某个元素后插入新元素，可以使用以下代码：

const existingElement = document.getElementById('existing-element');
const newElement = document.createElement('div');
newElement.textContent = 'This is a new element';
existingElement.after(newElement);

以上代码会在 existing-element 元素后面添加新元素 <div>This is a new element</div>。

在元素后插入文本内容

要在某个元素后插入文本内容，可以使用以下代码：

const existingElement = document.getElementById('existing-element');
const textNode = document.createTextNode('This is new text');
existingElement.after(textNode);

以上代码会在 existing-element 元素后面添加新文本内容 This is new text。

值得注意的是，after 方法需要在支持 Element.insertAdjacentElement() 方法的浏览器中使用。如果需要兼容一些旧版本浏览器，可以使用 Element.insertAdjacentHTML() 或 Element.insertAdjacentText() 方法。

总结

通过 JavaScript 在元素后插入新元素或者文本内容，可以轻松地动态更新前端页面，实现更加丰富的功能。使用 Element.after() 方法可以简单地实现此功能。