如何在没有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

的来源