How to prevent jQuery.append() function from automatically closing a
with
?

Question

In a loop I append single words to an element using

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

In the word array there are some  and  tags. And if they are added, jQuery seems to close them automatically with a .

How can I prevent it from doing that?

because `append()` does not work like a string concatenation... — Arun P Johny, Feb 01 '14 at 12:31
Are you trying something like this? http://jsfiddle.net/s858m/1/ — Khanh TO, Feb 01 '14 at 13:37
@Khanh TO Yes, I did. But as you see in your HTML, the
tags are also automatically closed by
. And that's what I wanted to avoid. — Michael, Feb 02 '14 at 08:12

score 5 · Accepted Answer · edited May 23 '17 at 12:00

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</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","","bar","baz","","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  from your input gets added, it has no effect. And the addition of the  doesn't have much visible effect either. So maybe it would be better if every element of wordArray included some text: ["foo","bar","baz","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!

score 0 · Answer 2 · answered Feb 01 '14 at 12:32

0

The append() method does not work like a string concatenation... when a new element tag is passed it creates a new element along with its closing tag

If you are appending the contents in a loop, you can just try(if you are not doing any other operation in the loop)

$(".somediv").append(wordArray.join(" "));

answered Feb 01 '14 at 12:32

Arun P Johny

365,836
60
503
504

The words should appear with a delay, so I can't use join. Is there something like string concatenation for elements in jQuery? – Michael Feb 01 '14 at 12:38
@Michael in that case you need to provide a sample of the `wordArray` so that we can recreate the case – Arun P Johny Feb 01 '14 at 12:45

How to prevent jQuery.append() function from automatically closing a
with
?

2 Answers2

Linked

Related

How to prevent jQuery.append() function from automatically closing a with ?

2 Answers2

Linked

Related

How to prevent jQuery.append() function from automatically closing a
with
?