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代码中，然后将所有代码添加到正文中

Answer 2

jQuery正在创建一个jQuery对象的新实例，该实例包含对通过解析<div><span>content</span></div>创建的DOM元素的引用。

jQuery做的一件非常有用的事情是，每次调用jQuery或其任何API方法都会返回新创建的jQuery实例或当前的jQuery实例。这样做的好处是，您可以链接调用以转换一组DOM元素。

在这种情况下，$(...)返回一个包含您要操作的DOM元素的jQuery实例。接下来，您链接css()，为该元素添加样式属性。最后，链接appendTo()，将其添加到目标DOM元素。在这种情况下，该目标是<body>元素。

以下是这个过程在JavaScript中的大致看法：

首先，我们需要创建我们希望插入的DOM元素。

var node = document.createElement("div");
node.innerHTML = "<div><span>content</span></div>";
var myElement = node.children[0];

然后我们将设置样式属性。

myElement.style.color = "red";

最后，让我们将它附加到现有元素。

document.body.appendChild(myElement);

从字符串创建DOM元素是通过innerHTML属性的魔力发生的。当JavaScript解析器遇到设置为元素innerHTML的字符串时，它会将该字符串解析为DOM元素并将这些元素作为子元素插入。

因此，jQuery正在做的是创建一个虚拟元素，将您提供的字符串设置为虚拟元素innerHTML属性的值。这会导致DOM元素被创建并作为虚拟元素子元素插入。最后，它检索对children元素的引用（您想要的元素）。

Answer 3

这一行从一个html字符串创建一个jQuery包装对象，基本上创建一个div，其中span的文本是单词content：

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

这将CSS属性应用于创建的元素，告诉它以红色显示文本：

.css("color", "red")

这会将创建的样式元素添加到DOM标记末尾的body：

.appendTo("body");

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

3 个答案: