Geek Answers Handbook

Manipulate DOM elements before adding them to a document

I'm just wondering if there is a clean implementation for getting elements before adding them to the DOM.

Example (w / jQuery):

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

It seems to me that this is impossible, but I would like to see if there is any implementation that allows this, because it would be very nice for classes and separation.

EDIT: I wonder if this is possible. What I meant by pure was not used as a string replacement or something hacked. This is not a situation when I make them. If I could create them, I would just create variables while I go. I have a situation where I have this html line with which I would like to find elements and manipulate before adding it to my page.

+3
source share
8 answers

Have you looked at the DOM DocumentFragments ?

+2
source

Here is how I did it:

 var test = $("<div/>"); test.append(html); test.find(".innertest"); // When I'm ready to append it.. $('#container').append(test);

I had to change my HTML stream, but this turned out to be a clean approach. Thanks for all your suggestions!

+4
source 
 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 do not need to modify your HTML stream because there is no need for an additional div .

I was looking for the same thing (what I got here), and after reading the solution you got, I came up with this. And he did a great job for what I needed.

+1
source 
 var test = $('<div>').addClass('test').append( $('<div>').addClass('innertest').text('Hello!') ), innerDiv = test.find('.innertest').parent().appendTo('body')

This manipulates before adding to the body element. Is that what you meant? If you can not specify?

0
source

As I understand it, you want to edit a specific DOM fragment to your satisfaction before displaying it , for example, "Manipulate the DOMs that are currently displayed".

I would rather suggest making a workaround for this, which I use several times for a similar purpose.

  • First append the div / element and immediately hide it .
  • There, after you can edit it in any way.
  • Do any editing / CSS application / DOM Manip and then display the element or delete it if you just want to get data from this.
  • TA-dah!

EDIT To solve the problem of possible flashing, you can do one more thing.

  • create an empty DIV and hide it (hiding an empty div may not cause blinking, because it will happen very quickly)
  • Then add the DOM object you want (while it is hidden)
  • then show your mercy about it.

let me know if I misunderstood your problem.

0
source

I believe that what you have now 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!");
0
source

If you pass a valid HTML string to jQuery() , it will return a jQuery object with a fresh creation of DOMElements. Then you can add this object to the body later, 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);
0
source

If you have xml or xhtml, you can manipulate it with jQuery as follows:

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

Creating a snippet for work works fine for xml POST / GET responses.

0
source

More articles:


All Articles