Добавить элемент до некоторого элемента

У меня есть этот код:

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

Я хочу добавить еще один элемент этого кода:

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

Я использую этот код

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

но он помещается только перед тегом div.

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

Я хочу, чтобы это было так

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

Ответ 1

Попробуйте это,

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

родители ( "td: first" ) вернут первый родительский элемент div

надеюсь, что эта помощь.....

Ответ 2

Используйте before или insertBefore, чтобы поместите элемент перед другим.

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

или

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

или более конкретно для вашего html:

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

Хотя, если это не просто (плохой) пример, это неверно. Вы не можете иметь тег <p> непосредственно перед <td>, потому что это означает, что <p> находится в пределах <tr>.

Ответ 3

Здесь выбирается элемент td с вложенным div с идентификатором vB_Editor_QR_cmd_insertimage. Он также предоставляет более чистый способ создания элемента html (который предоставляет jQuery)

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