Question

父div包含多个div，一个名为div的{{1}}应该始终在最后。如下例所示：

HTML

.div_object_last

Javascript：

<div class="div_parent">
    <div class="div_object">1</div>
    <div class="div_object">2</div>
    <div class="div_object_last"></div>
    <div class="div_object">3</div> <!--- append -->
</div>

使用JS的预期结果：

$('#div_parent').append('<div class="div_object">3</div>');

我想知道在追加事件发生后是否可以将<div class="div_parent"> <div class="div_object">1</div> <div class="div_object">2</div> <div class="div_object">3</div> <div class="div_object_last"></div>  </div>放在最后？

Answer 1

选择.div_object_last并使用before()添加新内容：

$('.div_parent .div_object_last').before('<div class="div_object">3</div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_parent">
  <div class="div_object">1</div>
  <div class="div_object">2</div>
  <div class="div_object_last">Last</div>
</div>

Answer 2

要在最后一个子元素之前插入元素：

$('.div_parent').children().last().before('<div class="div_object">3</div>');

将现有元素移动到最后一个：

$('.div_object_last').appendTo('.div_parent');

将el1移到el2上方/下方：

// Above
$(el1).before(el2);

// Below
$(el1).after(el2);

Answer 3

您可以尝试这种动态方式：

$('.div_parent').append($('.div_parent .div_object_last'));

Answer 4

 $('.div_parent div:last').before('<div class="div_object">3</div>');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="div_parent">
   <div class="div_object">1</div>
   <div class="div_object">2</div>
   <div class="div_object_last">Last</div>
 </div>

如何使用Javascript编程改变html中的div位置？

4 个答案: