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

Question

父 div 包含多个 div，一个名为 .div_object_last 的 div 应该总是在末尾.就像下面的例子:

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>