-3

I have been playing around with Jquery but I got stuck in this point and to solve it I have this doubt.

I would like to put all these anchor elements inside a div that I want to create.

<td class="cont-mod-none-options" valign="top" align="right">
    <a href="test1">copy</a>
    <a href="test2">cut</a>
    <a href="test3">
        <img src="/images/edit.png" width="28" height="12" border="0">
    </a>
    <a href="test4">
        <img src="/images/pic.png" width="12" height="12" border="0">
    </a>
</td>

Is there any way to create a div element and put all these elements inside that div? Like this:

<td class="cont-mod-none-options" valign="top" align="right">
    <div>
         <a href="test1">copy</a>
         <a href="test2">cut</a>
         <a href="test3">
            <img src="/images/edit.png" width="28" height="12" border="0">
         </a>
         <a href="test4">
            <img src="/images/pic.png" width="12" height="12" border="0">
          </a>
    </div>
 </td>

So, how many possibilities do I have to move that?

Cœur
  • 37,241
  • 25
  • 195
  • 267

1 Answers1

1
var $a = $("td").children();
$("td").append($("<div />").append($a));

I am not 100% sure what you mean about possibilities. There are more than a few ways to accomplish it. This is just one quick way.

Essentially you create a selector to point at what you want moved, and then append it to where you need it.

Fiddle with your example: http://jsfiddle.net/kt4F2/

var $a = $("td").children();
$("td").append($("<div />").append($a));

An alternate: http://jsfiddle.net/w9GCh/

the second uses $.wrapAll()

$("td").children().wrapAll("<div />");
Fallenreaper
  • 10,222
  • 12
  • 66
  • 129
  • @dfsq No, im creating a div tag which is appended to td with its content being $a. I just put it all on the same line. I could easily just say: `var $a = ..; var $div=$("
    "); $div.append($a); $("td").append($div);`
    – Fallenreaper Jul 16 '14 at 15:33
  • Fallen, is there any way using wrapAll()? – Al Sah-him Jul 16 '14 at 15:37
  • Yes, If you look at this link: http://jsfiddle.net/w9GCh/ It shows. If you inspect the Dom of the item, it does the exact same thing in 1 line that i wrote in 2. :) – Fallenreaper Jul 16 '14 at 15:39