Adding generated content to a jQuery object that is not DOM related

Question

I am trying to dynamically attach an HTML fragment to an existing element using .append .

Be that as it may, the HTML string created with the script is not added to the element.

The element that is added to it is not connected to the DOM at the time of adding the fragment.

All of this is encapsulated in a JavaScript function. Here is the code:

 append_content = function() { var elem = $('<li><div>some text</div></li>'); var somecontent = get_content(); // returns a string: '<div>xx</div>' elem.append('<div>bleh1</div>'); elem.append(somecontent); elem.append('<div>bleh2</div>'); console.log(elem); return elem; } 

The log contains all the elements correctly, for example:

 <li> <div>some text</div> <div>bleh1</div> <div>xx</div> <div>bleh2</div> </li> 

But when I connect the elem to the DOM again, the contents of the function call will disappear. That is, it does not appear in the calculated source (neither in FireBug, nor in the Chrome development tools).

It looks like this:

 <li> <div>some text</div> <div>bleh1</div> <div>bleh2</div> </li> 

I am pretty sure that I have some problems with the area or something like that, but I do not understand. There is no error message in the console. Any tips?

Update

Indeed, it was a self-made problem. The awesome code to display in this post, I realized that I called a similar function without calling the function mentioned above is silly to me. Thanks for all the comments and help.

Answer 1

This looks right to me - I would check the output of the get_content () method to make sure that it really returns a valid html. Check it using alert ("somecontent") and also the console - console.log only writes the first line of XML in firebug - not sure about chrome ...