Question

如何在另一个元素之前移动元素？如下所示，我需要在#parent之前移动#child。在#parent之前和之后已经存在一些div，因此append和prepend将无效。之前和之后只接受字符串。但是，父母和孩子都有很多内容，所以我不能只将它们复制到JavaScript。

<div id="container">
  //many other existing divs 

  <div id="parent">
     <div id="child"></div>
  </div>

  //many other existing divs
</div>

Answer 1

您需要.insertBefore()

在目标之前插入匹配元素集中的每个元素。

代码的

$('#child').insertBefore('#parent')

＆＃13;

$(function() {
  $('#child').insertBefore('#parent')
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div>many other existing divs
  </div>

  <div id="parent">
    parent
    <div id="child">child</div>
  </div>

  <div>many other existing divs
  </div>
</div>

＆＃13;

或者您也可以使用.before()

在匹配元素集中的每个元素之前插入由参数指定的内容。

$("#parent").before($('#child'));

＆＃13;

$(function() {
  $( "#parent").before($('#child'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div>many other existing divs
  </div>

  <div id="parent">
    parent
    <div id="child">child</div>
  </div>

  <div>many other existing divs
  </div>
</div>

＆＃13;

.before()和.insertBefore()方法执行相同的任务。主要区别在于语法特定，内容和目标的放置。

Answer 2

您正在寻找.insertBefore()

在目标之前插入匹配元素集中的每个元素。

  $('#child').insertBefore('#parent')

使用ID或CLASSNAME在另一个元素之前插入元素

2 个答案: