使用Javascript / JQuery在网页上将div移到另一个上方？

Question

我已经在CSS中看到了很多有关这样做的信息（远非理想），但是我正在考虑构建一个Chrome扩展程序，它要求在另一个div之前插入一个div（为了澄清，我的意思是在测试扩展程序时，需要使用Chrome开发者工具将div拖到另一个之上。 有没有一种方法可以在使用Javascript / JQuery加载页面时做到这一点（或通过Chrome扩展程序实现的其他某种方式）？

在以前的尝试中，我尝试使用insertAfter() / insertBefore()和before() ，但没有运气（尽管我可能会遗漏一些明显的东西），所以我猜另一个问题是这些是否需要以某种方式在内部使用Chrome扩展程序？

在此先感谢您的帮助！

Answer 1

这是一个小示范。

使用的insertBefore代码是这样的：

$("<div>").prop("id","between").insertBefore("#blah");

前两个jQuery函数只是创建div元素。 如果要移动现有的：

$("#existingDiv").insertBefore("#otherDiv");

这应该是不言而喻的。

对于插件，异步加载jQuery。 这样的事情应该做：

(function(){
    var s = document.createElement('script');
    s.src = 'http://code.jquery.com/jquery-1.8.2.min.js';
    document.getElementsByTagName('head')[0].appendChild( s );
})();

Answer 2

jQuery有一个非常简单的方法来将一个节点移动到另一个节点，您在问题中曾提到过：

之前：

<div id="first"></div> <div id="second"></div>

$("#second").insertBefore("#first");

后：

<div id="second"></div> <div id="first"></div>

---

至于Chrome，您可能需要进行一些挖掘，以查看是否在拨打电话时加载了jQuery