如何防止jQuery.append()函数自动关闭a？

在循环中,我使用单个单词添加到元素

$(".somediv").append(wordArray[i]+" ");

在单词数组中有一些< p>和< / p>标签.如果添加它们,jQuery似乎会使用< / p>自动关闭它们.

我怎么能阻止它呢？

解决方法

你不附加带有jquery的标签,你追加节点.您正在操作的文档不是像< html>< head>< title> T< / title>< / head>< body>< div id =“D”>< p> ; p< / p>< / DIV>< /体>< / HTML取代.这是一棵树

HTML Element
+---HEAD Element
|   `---TITLE Element
|       `---Text node,contents: "T"
`---BODY Element
    `---DIV Element,attributes: "id" => "D"
        `---P Element
            `---Text node,contents: "P"

无法在树中表示“未关闭的标记”或“未完成的元素”.只能存在完整的元素.

旧的document.write方法作为字符串对文档进行操作,它可以附加任意片段,但是有significant disadvantages to its use.从DOM-level-0“标记思维”到现代DOM“树思维”的过渡是使用jquery的先决条件.

您需要决定希望树在添加开始标记的时间与添加结束标记的时间之间的间隔中查看.这里有一个可能的答案：添加隐式结束标记,然后在每次追加时从头开始重建字符串,如下所示：

$(".somediv").html(wordArray.slice(0,i+1).join(" "));

这样,如果wordArray是[“foo”,“< p>”,“bar”,“baz”,“< / p>”,“quux”],循环将如下工作：

i    string passed to html()        equivalent HTML with all tags shown
0    "foo"                          "foo"
1    "foo <p>"                      "foo<p></p>"
2    "foo <p> bar"                  "foo<p>bar</p>"
3    "foo <p> bar baz"              "foo<p>bar baz</p>"
4    "foo <p> bar baz </p>"         "foo<p>bar baz</p>"
5    "foo <p> bar baz </p> quux"    "foo<p>bar baz</p>quux"

请注意,当< / p>从你的输入添加,它没有任何影响.并且添加< p>也没有太多明显的效果.所以也许如果wordArray的每个元素都包含一些文本会更好：[“foo”,“< p> bar”,“baz< / p>”,“quux”]

它看起来有点kludgy,但这是你尝试使用不完整的HTML元素作为输入格式得到的！树思考！为将来！