Flying Scotsman
Flying Scotsman

Reputation: 91

Change DIV in one remove/append

Here is what I am doing, I create a div structure dynamically

    var divt = $('<div id="toplevel"></div>');
divt.append('<div id="child1"><div class="content1"></div></div>');
divt.append('<div id="child2"><div class="content1"></div></div>');

I then store a clone to a separate node and add it to the DOM.

this.emptydivt = $(divt).clone();
maindiv.append(divt);

Later on in my code I want to replace the contents of the top level DIV using one remove/append.

Firstly I create a new node from my previously saved...

this.newdivt = this.emptydivt.clone();

Here I want to get the child divs and append some new content , I have tried various function but can't get it to work eg.

var childdiv = this.newdivt.find('#child1').html(); 
childdiv.append('<div> new content</div>');

then after I will replace the top level div

maindiv.remove('#toplevel');
maindiv.append(this.newdivt);

So is there a way to get the child div from a Jquery or JS node that is not in the DOM ?

Upvotes: 0

Views: 143

Answers (1)

Claudio Redi
Claudio Redi

Reputation: 68440

I see 2 typos in your code, not sure if on your real code they are not present

this.newdivt = this.emptydivt.clone();  // you missed ()

and

var childdiv = this.newdivt.find('#child1').html(); // you missed '' around #child1 

Also, this code is not valid as clone doesn't accept a jQuery object as parameter

this.emptydivt = $(eventGrid).clone(divt);

Maybe you just want divt.clone()?

EDIT

Remove all white spaces on your elements ids as white spaces are not allowed on id attribute.

Upvotes: 1

Related Questions