javascript - Jquery:prependTo 项目内的子项目

Question

我有一个与此类似的问题:

PrependTo item only ONCE in Jquery

但是我的 DOM 结构是:

<div class="div-class">
    <div class="child-div"></div>
</div>
<table class="table-class"></table>

我希望使用 jQuery 的输出是:

<div class="div-class">
    <div class="child-div">
        <table class="table-class"></table>
    </div><!--child-class-->
</div><!--div-class-->

但该解决方案的代码不起作用，我已尝试在循环内执行此操作，但无济于事。

谢谢。

Answer 1

您可以将它附加到子 div 或创建一个字符串，然后将其传递到 div 的 html() 中，就像我在下面所做的那样。将元素构建为字符串然后将其传入的好处是您只影响 DOM 一次 - 如果您在每个 tr 中附加大量 tr 或 td，这一点很重要。

如果您将此操作作为 lop 的一部分进行 - 那么您可以使用该循环的索引来控制显示或在循环之外执行此操作，并在更新 DOM 之前使用循环将 tr 添加到 str结束。

请注意，我添加了一个带有单个 td 的 tr 来演示表格。

$(document).ready(function(){
var str = '';

str += '<table class="table-class">';
  str += '<tr>';
    str += '<td>test</td>';
  str += '</tr>';
 str += '</table>';

$('.child-div').html(str)
})

table{border: solid 1px #333}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
    <div class="child-div">
    </div><!--child-class-->
</div><!--div-class-->