使用prependTo（）创建嵌套元素

Question

我编写了以下代码，旨在创建一个div，并在其中嵌套。这是代码。它的结果让我感到厌烦：

function(){
    $("<div>", {
    text: "<span>SomeText</span>",
    class: "queryTitle"
}).prependTo(container);

在chrome中检查时，这是生成的html：

<div class="queryTitle"><span>1234</span></div>

虽然这是我瞄准的确切html，但是这个html在浏览器中没有正确呈现，因为span块在浏览器中显示“unrendered”，如下所示：

<span>1234</span>

（我知道我可以重写下面的代码

function(){
  $("<div class = " + queryTitle + "><span>1234</span></div>").prependTo(container)
}

返回所需的结果，但我发现这种语法有点难以理解，而且我真的很想了解我作为教育练习做错了什么。

感谢您的阅读。

Answer 1

text函数将创建一个textNode，它不会将其内容视为html（以明文形式显示span标记）。请改用html：

function(){
    $("<div>", {
    html: "<span>SomeText</span>",
    'class': "queryTitle"
}).prependTo(container);

修改 - 为清楚起见，您的代码相当于：

$("<div>")
    .text("<span>SomeText</span>") // creates a textNode and appends it
    .addClass("queryTitle")
    .prependTo(container);

你真正想要的地方：

$("<div>")
    .html("<span>SomeText</span>") // sets innerHTML
    .addClass("queryTitle")
    .prependTo(container);

可以在此处找到（稍微）描述第一种语法的文档：http://api.jquery.com/jQuery/#jQuery2

注意：将HTML字符串放入JavaScript中通常是一个坏主意。你不应该这样做，因为随着项目的发展变得难以维护。