javascript - 这个 jquery 代码是如何工作的？

Question

(不好意思，我想不出更好的标题了)

我最近了解到你可以在 jquery 中做这样的事情:

$("<div><span>content</span></div>").css("color", "red").appendTo("body");

我的问题是关于以下内容:

$("<div><span>content</span></div>")

jquery 如何将它从字符串转换为 dom 元素，您如何在 vanilla js(没有 jquery)中做同样的事情？

我试图查看 jquery 源代码，但我并没有真正理解它。

非常感谢任何解释!

Answer 1

纯 javascript 中的等价物是

var newDiv = document.createElement("DIV");
newDiv.style.color = "red";
var newSpan = document.createElement("SPAN");
newSpan.innerHTML = "content";
newDiv.appendChild(newSpan);
document.body.appendChild(newDiv);

jquery 通过定义可链接的函数来简化此操作，这意味着下一个函数使用前一个函数的返回值作为其输入，因此在您的示例中，它将 css 添加到您的 html 代码中，然后将所有这些代码添加到正文中