在某个元素之前添加元素

Question

我有这段代码：

<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>

- vinanghinguyen

Answer 1

试试这个：

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

parents("td:first")会返回div的第一个父级元素。

希望这能帮到你......

- Anil D

Answer 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>标签内。

- James Montagne

---

哦不，$("<p>blablablalblablab</p>") 可以更改，在代码中有很多 td 标签。只有 <div id="vB_Editor_QR_cmd_email" class="imagebutton"> 标签是固定的。 - vinanghinguyen

Answer 3

这个选择器选中了包含id为vB_Editor_QR_cmd_insertimage的嵌套div的td元素。它还提供了一种更简洁的创建HTML元素的方式（jQuery提供）。

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

- Greg Franko

---

那不是你所说的功能。它选择的是 div，而不是 td。 - James Montagne

很好的发现。我现在正在使用closest()函数向上遍历DOM树来获取td元素。 - Greg Franko