使用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中通常是一个坏主意.你不应该这样做,因为随着项目的发展变得难以维护.