如何在JavaScript中不使用jQuery在元素之前插入HTML？

Question

是否有一个纯JavaScript函数可以在另一个元素之前插入HTML？ 在jQuery中，可以通过以下方式实现：

$("#my_id").before('<span class="asterisk">*</span>');

如果没有相应的JavaScript函数，我该如何实现所描述的功能？

- Aymand Osanes

---

document.getElementById('my_id').before(span) 这是原生JS，在ES5中添加。 - Gibolt

Answer 1

一个鲜为人知的方法是 element.insertAdjacentHTML。使用这种方法（由所有主要浏览器支持，包括IE 4），您可以将任意 HTML 字符串插入文档中的任何位置。

为了说明该方法的威力，让我们以你的例子为例...

$("#my_id").before('<span class="asterisk">*</span>');

成为

document.getElementById('my_id').insertAdjacentHTML('beforebegin',
    '<span class="asterisk">*</span>');

insertAdjacentHTML的第一个参数决定了插入位置。下面是与jQuery的比较：

• $().before - 'beforebegin'
• $().prepend - 'afterbegin'
• $().append - 'beforeend'
• $().insertAfter - 'afterend'

可以看出，它非常容易使用。假设jQuery选择器只返回一个元素，通常可以使用document.querySelector，但在这种特定情况下，使用document.getElementById更有效率。

- Rob W

---

考虑接受这个答案而不是其他的答案。大多数用户都知道标准DOM方法，比如insertBefore和appendChild，但insertAdjacentHTML则被束之高阁。通过接受这个答案，它会被推到顶部，当用户访问这个页面时，它会是第一个看到的。 - Rob W

一个我从未了解过的优秀方法。 - The Dark Knight

我在这里学到了一些东西，我会在我的答案中添加一个注释。 - Codemonkey

insertAdjacentHTML 真是太棒了。 - stormec56

Answer 2

编辑：我更喜欢@Rob W的回答，认为那应该成为被采纳的答案，而不是这个。

---

这将实现您想要的功能，无需使用任何臃肿的库，如jQuery的支持。

var my_elem = document.getElementById('my_id');

var span = document.createElement('span');
    span.innerHTML = '*';
    span.className = 'asterisk';

my_elem.parentNode.insertBefore(span, my_elem);

- Codemonkey

---

谢谢。这对我很有用。 - Aymand Osanes

能够帮助别人一次，感觉真好，通常都是我在问问题！ - Codemonkey

@AymandOsanes，您是否考虑取消接受此答案，转而接受Rob W的答案呢？ - Codemonkey

@Codemonkey 为什么？ - Ver Nick

我认为这是比我的回答更好的答案。 - Codemonkey

那是一个真正的绅士 (@Codemonkey) - Silidrone

Answer 3

你可以在JavaScript中创建自己的函数，例如：

代码

var id = document.getElementById('my_id');
var s = document.createElement('span');
s.innerHTML = '*';
s.className = 'asterisk';
id.parentNode.insertBefore(s, id);

“InsertBefore Docs”和“Example”链接的英文页面可以在以下链接中找到：InsertBefore 文档 和 示例。

你可以创建一个名为“before”的函数，如下所示：

before: function() {
    return this.domManip( arguments, false, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this );
        }
    });
},

来源于 http://code.jquery.com/jquery-1.9.1.js。

- Rohan Kumar

Answer 4

insertAdjacentElement

有时候，与其使用HTML字符串，您可能希望在另一个元素之前插入一个元素。如果：

• 您想要将事件侦听器附加到子元素（并且不想使用内联处理程序，因为它们是极其不良的做法）。或者
• 您已经有一个对元素的引用 - 也许是页面上已存在的元素，或者是由某个其他函数或脚本创建的元素，并且您想要注入它

在这种情况下，您可以使用.insertAdjacentElement。它类似于.insertAdjacentHTML，但它将元素插入到所需位置，而不是在所需位置插入HTML字符串。您可以在相邻的元素上调用它，并且为了指定插入的元素位置，第一个参数可以使用'beforebegin'、'afterbegin'、'beforeend'或'afterend'。

例如：

const input = document.querySelector('input');
const addButton = document.querySelector('button');
const lastPost = document.querySelector('.posts div');

const createPost = (title) => {
  const newPost = document.createElement('div');
  newPost.appendChild(document.createElement('h4')).textContent = title;
  const button = newPost.appendChild(document.createElement('button'));
  button.textContent = 'Delete';
  button.addEventListener('click', () => newPost.remove());
  return newPost;
};
addButton.addEventListener('click', () => {
  const newPost = createPost(input.value);
  lastPost.insertAdjacentElement('beforebegin', newPost);
});

.posts div {
  padding: 10px;
  border: 1px solid black;
}

<input>
<button>Add post</button>

<h2>Posts</h2>
<div class="posts">
  <div>
    Last post
  </div>
</div>

- CertainPerformance