Manipulate DOM elements before adding them to the document [duplicate]

Answer 1

As far As i understood you want to edit a certain piece of DOM to your satisfaction before you display it, like you Manipulate a DOM thats currently in Display.

I would rather suggest doing a workaround for this, which I employ several times for a similar purpose

1. First Append the DIV / element and hide it immediately.
2. There After you are free to edit it any way you like.
3. Do any sort of editing / CSS application / DOM Manip and then unhide the element or remove it if you just wanted some data out of it.
4. ta-da!

EDIT To resolve the issue of possible blinking, you can do another thing.

1. create an empty DIV and hide it (hiding an empty div won't perhaps induce blinking because it would happen very fast)
2. Then append the DOM object you want to (while it is hidden)
3. then exercise your mercy over it.

let me know if I understood your problem wrong.

Answer 2

If you pass a string of valid HTML to jQuery() it will return a jQuery object with freshly create DOMElements. You can then append that object to the body at a later time, i.e:

  var newDiv = $("<div class='test'><div class='innertest'>Hello!</div></div>");
  var innerDiv = newDiv.find('.innertest');
  innerDiv.css('background-color', 'blue');
  $('body').append(newDiv);      

Answer 3

var new_element = $(html);
new_element.find('.innertest').doStuffToIt(); //last one isn't an actual method

// and when you're done...

new_element.appendTo('#container');

You don't need to modify your HTML stream, because there's no need for the extra div.

I was looking for the same thing (that's how I got here) and after reading the solution you got to, I came up with this. And it worked great for what I needed.

Answer 4

If you have xml or xhtml you can manipulate it using jQuery like so:

var html = "<div class='test'><div class='innertest'>Hello!</div></div>";
var domFragment = $(html);
domFragment.find('.innertest'); //More jQuery...

Creating a fragment to manipulate works great for xml POST/GET responses too.

Answer 5

I believe that what you currently have will work. For example, to change the text in the inner div, you can do:

var html = '<div class="test"><div class="innertest">Hello!</div></div>';
$(html).find(".innertest").text("Goodbye!");

Answer 6

Have you looked at DOM DocumentFragments?