将表行添加到列表中

时间:2017-08-23 12:33:11

标签: javascript jquery html

在我的代码中,我有这篇文章是

的一部分
<ul id="more-menu" class="more-menu arrow_box">
...
</ul>

在我的.js文件中,我想将元素添加到此列表中,其中一个应该是一个包含一行的图表,用于保存图标,我的代码用于添加表格:

    $(".more-menu.arrow_box").prepend('</table>' + '</li>');

      $(".more-menu.arrow_box").prepend("<td id='4th'>XYZ</td>");

      $(".more-menu.arrow_box").prepend("<td id='3rd'>XYZ</td>");

      $(".more-menu.arrow_box").prepend("<td id='2nd'>XYZ</td>");

      $(".more-menu.arrow_box").prepend("<td id='1st'>XYZ</td>");

    $(".more-menu.arrow_box").prepend("<li style='background-color: #444444'><table class='ribbon-menu'>");

基本上其中三个只是带有跨度的div(可点击的图标),另一个是带有一些元素的另一个箭头框。

结果我得到了:

<li style="background-color: #444444"><table class="ribbon-menu"></table></li>

<td></td>元素

1 个答案:

答案 0 :(得分:0)

在DOM中正确构建

如何逐件插入数据的一种可能性是将完整的外部元素插入到对象空间中,然后相应地更改它们。

因此:

$(".more-menu.arrow_box").prepend("<li style='background-color: #444444'><table class='ribbon-menu'></table></li>");
table = $(".more-menu.arrow_box").children().first().find('table')
table.append("<td id='1st'>XYZ</td>")
table.append("<td id='2nd'>XYZ</td>")
table.append("<td id='3rd'>XYZ</td>")
table.append("<td id='4th'>XYZ</td>")

虽然为数据创建<tr>也不错:)