Manipulate DOM elements before adding them to the document

Question

Hey all,

I was just wondering if there is a clean implementation to getting elements before appending them to the DOM.

Example (w/ jQuery):

var html = "<div class = 'test'><div class = 'innertest'>Hello!</div></div>";

var innerDiv = $(html).find('.innertest');

---

I feel like its not possible, but I'd like to see if there is any implementation out there that allows for this- because this would be pretty sweet for classes and separation.

EDIT: I'm wondering if this is possible. What I meant by clean was it didn't use like a string replace or something hacked up. It's not a situation where I make them. If I could make them I would just create variables as I go. I have a situation where I have this html string that I'd like to find elements from and manipulate BEFORE I append it to my page.

Answer 1

var test = $('<div>').addClass('test').append(  

    $('<div>').addClass('innertest').text('Hello!')

), innerDiv = test.find('.innertest').parent().appendTo('body')

This is manipulating before appending to the body element. Is this what you meant? If not can you please specify?

Answer 2

Have you looked at DOM DocumentFragments?

Answer 3

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 4

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 5

This is how I ended up doing it:

var test = $("<div/>");
test.append(html);

test.find(".innertest");

// When I'm ready to append it..

$('#container').append(test);

I had to modify my HTML stream, but this ended up being a clean approach. Thanks for all your suggestions!

Answer 6

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 7

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.