如何在没有jQuery的JavaScript中在元素之前插入HTML？

Question

如何在纯JavaScript中重写此jQuery操作:

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

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更有效.

Answer 2

这将做你想要的,而不需要任何像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);

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

你可以在之前创建一个函数,

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

Answer 4

插入相邻元素

有时，您可能想要将一个元素插入到另一个元素之前，而不是 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>