如何防止 jQuery.append() 函数自动关闭 <p>与 </p>? [英] How to prevent jQuery.append() function from automatically closing a <p> with </p>?
问题描述
在一个循环中，我将单个单词附加到一个元素中使用
In a loop I append single words to an element using
$(".somediv").append(wordArray[i]+" ");
在单词数组中有一些<p>和</p>标签.如果添加它们，jQuery 似乎会使用 </p> 自动关闭它们.
In the word array there are some <p> and </p> tags. And if they are added, jQuery seems to close them automatically with a </p>.
我怎样才能阻止它这样做?
How can I prevent it from doing that?
推荐答案
你不用 jquery 附加标签，你附加节点.你操作的文档不是<html><head><title>T</title></head><body><div id="D">这样的字符串<p>P</p></div></body></html>.就像一棵树
You don't append tags with jquery, you append nodes. The document you are operating on is not a string like <html><head><title>T</title></head><body><div id="D"><p>P</p></div></body></html>. It is a tree like
HTML Element
+---HEAD Element
| `---TITLE Element
| `---Text node, contents: "T"
`---BODY Element
`---DIV Element, attributes: "id" => "D"
`---P Element
`---Text node, contents: "P"
没有办法在树中表示未关闭的标签"或未完成的元素".只有完整的元素才能存在.
There is no way to represent an "unclosed tag" or "unfinished element" in the tree. Only complete elements can exist.
旧的 document.write 方法将文档作为字符串操作，它可以附加任意片段，但是有 其使用的重大缺点. 从 DOM-level-0 标签思维"到现代 DOM 树思维"的过渡是一个先决条件用于使用 jquery.
The old document.write method operates on the document as a string, and it can append arbitrary fragments, but there are significant disadvantages to its use. The transition from DOM-level-0 "tag thinking" to modern DOM "tree thinking" is a prerequisite for using jquery.
您需要决定在添加开始标签和添加结束标签之间的时间间隔内希望树的外观.这是一个可能的答案:添加隐式结束标记，然后在每次追加时从头开始重建字符串，如下所示:
You need to decide how you want the tree to look in the interval between the time when the start tag is added and the time when the end tag is added. Here's one possible answer: let the implicit closing tag be added, and then rebuild the string from the start each time you append, like this:
$(".somediv").html(wordArray.slice(0,i+1).join(" "));
如果 wordArray 是 ["foo","<p>","bar","baz","</p>","quux"] 循环将像这样工作:
That way if wordArray is ["foo","<p>","bar","baz","</p>","quux"] the loop will work like this:
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"]
Note that when the </p> from your input gets added, it has no effect. And the addition of the <p> doesn't have much visible effect either. So maybe it would be better if every element of wordArray included some text: ["foo","<p>bar","baz</p>","quux"]
它看起来有点笨拙，但这就是你尝试使用不完整的 HTML 元素作为输入格式的结果！树思维！ 为了未来！
It looks a little kludgy, but that's what you get for trying to use incomplete HTML elements as your input format! Tree thinking! For the future!
这篇关于如何防止 jQuery.append() 函数自动关闭 <p>与 </p>?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
