Javascript 中 jQuery 的 .before() 函数相当于什么？

Question

Javascript 中的 .before() 相当于什么？

Answer 1

node.insertBefore()

几乎是等价的：https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore

$('#id').before('something');
//equivalent 
var node = document.getElementById('id');
node.parentNode.insertBefore('something', node);

这是 jQuery 的作用：https://gist.github.com/kagagnon/a13de27760ba1af883c0#file-gistfile1-js-L6064

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

Answer 2

您可以在 javascript 中使用

insertBefore

node.insertBefore(newnode, existingchild);

上面的示例将把新节点作为节点的子节点附加到现有子节点之前。

Answer 3

好吧，这些答案有点欺骗性。 使用

node.insertBefore

与使用 jQuery

.before()

方法有点不同。

// jQuery
$('.element').before('<span class="class-name">Some text</span>');

// Pure JS
var _$element = document.querySelector('.element');
var _$new = document.createElement('span');
_$new.outerHTML = '<span class="class-name">Some text</span>';
_$element.parentNode.insertBefore(_$new, _$element);

---

如果您想知道为什么它在 jQuery 片段中看起来如此简单

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

请注意，它以

this.domManip

开头。它在该函数中在幕后做一些事情，抽象出元素创建的东西。

Answer 4

将

insertAdjacentHTML

与

beforebegin

一起使用是最简单的，并且已经支持很长时间了：

document.querySelector ('#path').insertAdjacentHTML ('beforebegin', '<span class="class-name">Some text</span>');