60

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

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

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

4

3 回答 3

157

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

为了说明该方法的强大功能，让我们使用您的示例...：

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

变成

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

insertAdjacentHTML的第一个参数确定插入位置。这是与 jQuery 的比较：

如您所见，它非常易于使用。假设 jQuery 选择器只返回一个元素，一般情况下可以使用document.querySelector，但在这种特定情况下，使用document.getElementById效率更高。

于 2013-10-11T10:50:29.813 回答
79

编辑：我更喜欢@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);
于 2013-10-11T10:34:08.203 回答
8

您可以在 javascript 中创建自己的函数，例如，

代码

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

InsertBefore 文档 和示例

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

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

于 2013-10-11T10:33:54.673 回答