javascript - 使用 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 block 在浏览器中显示“未渲染”，如下所示:

<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 通常是一个坏主意。您不应该这样做，因为随着项目的增长，它会变得难以维护。