CODEWITHSUNDEEP
javascriptjquerydom
Shane
Shane

Reputation: 5151

possible to use jQuery on elements outside the document?

Working with some legacy architecture and because of the nature of the initialization sequence I need to wrap an element before it's been added to the document. Say I have the following:

<div id="containerX">
   <div id="myNode"></div>
</div>

And I need to wrap "myNode" before it's added to the DOM. Do jQuery selectors even work in this context? If so, how can I make that happen? I've tried passing in the element like so:

(Corrected some typos here referred to in some answers below):

$(this.element).wrap('<div id="'+ "myWrapper_" + this.id + '"></div>');

with no luck. I'm assuming that the usual syntax for selectors won't work since the nodes are outside the document. The closest thing I've found was this post here: Manipulate DOM elements before adding them to the document but the difference between my situation and his is I don't have strings, I have elements created with document.createElement that have not been appended.

Can anyone point me in the right direction or is this even possible?

Thanks

Upvotes: 5

Views: 1881

Answers (3)

dnuttle
dnuttle

Reputation: 3830

First, you have an error in your code. You're missing a "+". Try this:

$(this.element).wrap('div id="' + myWrapper + this.id + '"></div>');

Note the "+" before "myWrapper".

However I think you're right, you can't use wrap on an element outside the DOM. You can always add it to the DOM, then wrap it. And if you don't want it in the DOM, then call remove to get it back; of course, this would be mean removing its parent, rather than the original element itself. Haven't tried all of this myself but it should work. You would need the parent (wrapper) to have a unique id so that you can be sure to grab it. One other thing, it looks like you want the parent to have the same id as the element you're wrapping. You should avoid assigning the same id to two elements. So if the parent gets the id, then it should be removed from element.

Upvotes: 0

kapa
kapa

Reputation: 78671

jQuery lets you work on elements not added to the document yet. They can be simple HTML strings as well as elements constructed with createElement().

Let me give you a quick example:

var container=document.createElement('div');
container.id='containerX';
var mynode=document.createElement('div');
mynode.id='myNode';
container.appendChild(mynode);

$(container).find('#myNode').wrap('<div id="myWrapper'+mynode.id+'">');

This should result in the structure you wanted. You just have to apply your variable names. I did it this way because I am unsure what your this.element contains.

Please check out the jsFiddle Demo.

Upvotes: 2

GolezTrol
GolezTrol

Reputation: 116110

You can use Jquery on other elements as as well, and I've more than once used it to parse a response from an AJAX request.

Though I am not sure if your exact request is possible, I think the main problem in your code is the missing < before the div you're trying to wrap around your element.

Upvotes: 4

Related Questions