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

How to insert HTML before element in JavaScript without jQuery?

本文关键字：元素 插入 HTML 情况下 jQuery JavaScript      更新时间：2023-09-26

是否有一个纯JavaScript函数用于在另一个元素之前插入HTML？在jQuery中，它可以像这样完成：

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

如果没有任何等效的JavaScript函数，我如何实现所描述的功能？

一个鲜为人知的方法是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的答案，并认为这应该是公认的答案，而不是这个。

这将做你想要的，不需要任何臃肿的库（如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);

你可以在javascript中制作自己的函数，比如，

法典 

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

插入文档和示例之前

您可以在喜欢之前创建一个函数，

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

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>

相关文章：