add element before some element

Question

I have this code:

<td>
    <div id="vB_Editor_QR_cmd_email" class="imagebutton">
      abc
    </div>
</td>

I want put another element to this code like this:

<p>blablablalblablab</p>
 <td>
    <div id="vB_Editor_QR_cmd_email" class="imagebutton">
       abc
     </div>
 </td>

I use this code

 $("#vB_Editor_QR_cmd_insertimage").before("<p>blablablalblablab</p>");

but it only put before div tag.

 <td>
    <p>blablablalblablab</p>
    <div id="vB_Editor_QR_cmd_email" class="imagebutton">
       abc
     </div>
 </td>

I want it like this

 <p>blablablalblablab</p>
     <td>
        <div id="vB_Editor_QR_cmd_email" class="imagebutton">
           abc
         </div>
     </td>

Anil D · Accepted Answer · 2012-02-28 05:35:18Z

11

Try this,

$("#vB_Editor_QR_cmd_insertimage").parents("td:first").before("<p>blablablalblablab</p>");

parents("td:first") will return first parent of div

hope this help.....

answered Feb 28, 2012 at 5:35

Anil D

2,0096 gold badges32 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Montagne · Accepted Answer · 2012-02-28 02:27:54Z

7

Use before or insertBefore to place an element before another.

$("<p>blablablalblablab</p>").insertBefore("td");

or

$("td").insertBefore("<p>blablablalblablab</p>");

or more specifical to your html:

$("vB_Editor_QR_cmd_email").parent("td").before(...);

Though unless this is just a (bad) example, this is invalid. You can't have a <p> tag directly before a <td> because that would imply that the <p> is within a <tr>.

edited Feb 28, 2012 at 2:27

answered Feb 28, 2012 at 2:22

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

1 Comment

vinanghinguyen Over a year ago

oh no $("<p>blablablalblablab</p>") can be change and in code have very much td tag. only <div id="vB_Editor_QR_cmd_email" class="imagebutton"> tag is fixed

Greg Franko · Accepted Answer · 2012-02-28 03:19:10Z

1

This selects the td element that has a nested div with an id of vB_Editor_QR_cmd_insertimage. It also provides a cleaner way to create an html element (that jQuery provides)

$("div#vB_Editor_QR_cmd_insertimage").closest("td")
.before($("<p/>", { text: "blablablalblablab" }));

edited Feb 28, 2012 at 3:19

answered Feb 28, 2012 at 2:32

Greg Franko

1,77015 silver badges14 bronze badges

2 Comments

James Montagne Over a year ago

That doesn't do what you say it does. It selects the div, not the td.

Greg Franko Over a year ago

Good catch. I am now using closest() to go up the DOM tree to grab the td element.

Collectives™ on Stack Overflow

add element before some element

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related