JavaScript vs jQuery选择器

Question

我想知道jQuery选择器$("#fake-div)和JavaScript选择器getElementById("fake-div")之间有什么区别，首先，它们甚至被称为JavaScript选择器吗？我知道jQuery返回jQuery对象，而JavaScript选择器返回DOM元素；但是，给出以下两个代码块：

jQuery选择器

var post = $("#postid");
var reply_list = post.find(".replies_ul");
var current_reply = document.createElement("li");
current_reply.setAttribute("class", "reply_li");
reply_list.insertBefore(current_reply, reply_list.firstChild);

JS选择器

var content_list = document.getElementById("content_ul");
var current_post = document.createElement("li");
current_post.setAttribute("class","content_li");
content_list.insertBefore(current_post, content_list.firstChild);

当调用最后一行代码时，jQuery选择器最终将列表从DOM中删除，并且JavaScript选择器成功将列表项插入列表的顶部。 我正在寻找有关正在发生的事情的解释。

Answer 1

您代码中的jQuery insertBefore无效，它接受两个参数，而jQuery仅接受一个参数：

.insertBefore（目标）

描述 ：将每个元素插入匹配元素集中的目标之前。

和正常的一个：

Node.insertBefore

说明 ：将指定节点作为当前节点的子级插入到引用元素之前。

parentElement.insertBefore(newElement, referenceElement)

Answer 2

区别不在于选择器，而在于您要调用的方法/函数。

您正在使用jQuery insertBefore函数，并将其与javascript insertBefore函数进行比较。

在jQuery中， insertBefore函数只有一个参数，因此您使用的是错误的。

如果要使用Javascript函数insertBefore而不是jQuery函数，则必须将jQuery对象reply_list转换为Javascript函数。 您可以使用.get(0)或[0]来做到这一点，如下所示：

reply_list[0].insertBefore(current_post, content_list.firstChild);

//or like this
reply_list.get(0).insertBefore(current_post, content_list.firstChild);

Answer 3

在您的第一段代码中， reply_list是一个jQuery对象。 表示它实际上没有.firstChild属性。

更改为此：

reply_list.get(0).insertBefore(current_reply, reply_list.get(0).firstChild);

请注意jQuery的insertBefore和JavaScript的insertBefore之间的区别