5

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

Community
  • 1
  • 1
Shane
  • 4,921
  • 5
  • 37
  • 53

3 Answers3

4

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.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • oh, haha.. Sorry about that. That was a typo on my part that didn't exist in my code. I'll correct that in the post. thx. – Shane Nov 14 '11 at 12:48
  • the real world example was far too convoluted for copy and paste. – Shane Nov 14 '11 at 13:50
2

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.

kapa
  • 77,694
  • 21
  • 158
  • 175
0

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.

dnuttle
  • 3,810
  • 2
  • 19
  • 19
  • ...these typos are going to be the death of me. Sorry about that. The below represents exactly what I MEANT to type and should have paid more attention to. $(this.element).wrap('
    '); Thanks for the clarification, you and GolezTrol have confirmed my suspicions.     – Shane Nov 14 '11 at 13:05
  • You actually CAN wrap an element outside the DOM, just check the Fiddle in my answer. – kapa Nov 14 '11 at 13:06
  • @bazmegakapa, it has nothing to do if the element is in the DOM or not, it has to do with the element having a `parentNode` property which your jsfiddle is just dirty hacking in (as in, creating a redundant element to be a parent). A naked, freshly created element that is not appeneded in the DOM, doesn't have a `parentNode `property set which means wrap doesn't work. `$( "
    ").appendTo("body").wrap( "" ).parent().detach()` correctly returns a jQuery object with structure "
    " that is not in the DOM and doesn't need any intermediate element hacks.
     – Esailija Nov 14 '11 at 13:22
  • @Esailija Thanks for the clarification. You really can't wrap an element outside the DOM if it has no parent. BTW I haven't `dirty hacked` anything in my Fiddle, that's the structure the OP wanted :). – kapa Nov 14 '11 at 13:25
  • My mistake, it wasn't clear to me if the html was static and separate from the javascript in the OP :P – Esailija Nov 14 '11 at 13:35
  • baz's post took me in a direction that solved my problem. I might have thrown the thread off the scent along the way, but what I was trying to accomplish was to wrap a node in a tree outside the DOM. (For anyone trying to do this, what is probably the best thing to do with a naked element would just be something like this fiddle: http://jsfiddle.net/fnY2F/ and leave jQuery out of it. – Shane Nov 14 '11 at 13:49