如何使用Javascript以编程方式更改html中的div位置？

Question

父母div包含多个divs，一个名为div的.div_object_last应该总是在最后。如下例所示：

HTML

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

Javascript：

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

---

使用JS的预期结果：

<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> <!--- moved to end --->
</div>

我想知道是否有可能在追加事件后将div_object_last放在最后？

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>