如何防止 jQuery.append() 函数自动关闭 <p>用</p>? [英] How to prevent jQuery.append() function from automatically closing a <p> with </p>?
问题描述
在循环中，我使用
将单个单词附加到元素$(".somediv").append(wordArray[i]+" ");在单词数组中有一些 和
</p> 自动关闭它们.我怎样才能防止它这样做?
使用 jquery 不是附加标签，而是附加节点.你操作的文档不是
HTML 元素+---HEAD 元素|`---TITLE 元素|`---文本节点，内容:T"`---BODY 元素`---DIV 元素，属性:id"=>丁"`---P 元素`---文本节点，内容:P"无法在树中表示未关闭的标签"或未完成的元素".只有完整的元素才能存在.
旧的document.write方法以字符串的形式对文档进行操作，可以追加任意片段，但是有其使用的显着缺点. 从 DOM-level-0标签思维"到现代 DOM树思维"的转变是一个先决条件用于使用 jquery.
您需要决定在添加开始标记的时间和添加结束标记的时间之间的时间间隔内，您希望树的外观.这是一个可能的答案:添加隐式结束标记，然后每次追加时从头开始重建字符串，如下所示:
$(".somediv").html(wordArray.slice(0,i+1).join(" "));那样的话，如果 wordArray 是 ["foo","<p>","bar","baz","</p>","quux"] 循环将像这样工作:
i 字符串传递给 html() 等效 HTML，显示所有标签0 "富" "富"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> 被添加时，它没有任何效果.并且添加 也没有太多明显的效果.所以也许 wordArray 的每个元素都包含一些文本会更好:["foo","<p>bar","baz</p>","quux"]
它看起来有点笨拙，但这就是尝试使用不完整的 HTML 元素作为输入格式的结果！树状思维！ 为了未来！
In a loop I append single words to an element using
$(".somediv").append(wordArray[i]+" ");
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?
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.
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(" "));
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"
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"]
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屋！
