Jquery appends HTML strangely into a div

I have the following code:

$("#samplediv").html("<div>");  
$("#samplediv").append("<b>Test text</b>");
$("#samplediv").append("</div>");

I require the following output:

<div><b>Test text</b></div>

Howeve开发者_如何学Cr, the output is:

<div></div><b>Test text</b>

What am I doing wrong? How can I prevent this behaviour?

Thanks!

It is the browser doing it, not jquery. Most browsers are going to fix faultly HTML as best they can. If you add only part of a Div, it will fix it by adding the rest.

Here is some info though... Dom queries are costly in all JS, even more so in jQuery. In yours, you are doing three. You can reduce that to one, by doing the following code:

var html = "<div>";
html+="<b>Test text</b>";
html+="</div>";
$("#samplediv").html(html);

If you build your html separate, and then do your append, you will be able to do what you want. This is the recommended way of dealing with DOM manipulation. It is way more performent.

jQuery does not append strings of HTML, but DOM elements (created by parsing the input HTML).

Thus, the above does as it should:

$("#samplediv").html("<div>"); // Create <div /> element
$("#samplediv").append("<b>Test text</b>"); // Append <b>...</b> _after_ <div />
$("#samplediv").append("</div>"); // Discard, invalid element.

The above answers the "why" part of your question. Other answers will guide you in the direction of "how" to achieve the desired result.

You are assuming that .append merely add your string to the DOM, which is a faulty assumption. .append is using the browsers JavaScript API (usually the innerHTML method) to inject your code, and will (should) add any missing closing tags and discard invalid code.

When you do .append("<div>"), it will actually add <div></div> to the DOM which is why you're getting that result.

To get the result you want, you either want to use concatenated strings or create a jQuery object which you can play with.

Method #1: Concatenated strings

var html = "<div>";
html += "<b>Test text</b>";
html += "</div>";
$("#samplediv").html(html);

Method #2: jQuery object

var myDiv = $("<div></div>");
myDiv.append("<b>Test text</b>");
$("#samplediv").html(myDiv);

Note: Working with strings instead of jQuery objects is alot faster, so if you don't need to hook up any events or need the flexibility it's strongly recommended to use the first method.

Manipulating the DOM is slow and cumbersome, which is why I didn't provide a method that appends part after part (like in your example). It's a good practice to try and minimize the amount of manipulation you do to the DOM.

When you append the first string, a well-formed div is appended, which means both opening and closing tags.

may be you can try based on your method.

$("#samplediv").html("<div></div>"); 
$("#samplediv div").append("<b>Test text</b>");

However there are many other methods to append the div element.

$("#samplediv").html('<div></div>');   
$("#samplediv div").append("<b>Test text</b>");

Try this.

I think that what you're after is such thing:

$("#samplediv").html($("<div>").html("<b>Test text</b>"));

This logic still separates things like in your original code but put it all inside the same <div>.

Append doesn't work like that. This will...

var myDiv = $('<div></div>');
myDiv.append("<b>Test text</b>");
$("#samplediv").append(myDiv);