使用 Javascript/JQuery 将 div 移到另一个上方？答案

【问题标题】：Moving div above another using Javascript/JQuery?使用 Javascript/JQuery 将 div 移到另一个上方？
【发布时间】：2012-12-04 03:16:05
【问题描述】：

我已经看到很多关于在 CSS 中执行此操作（远非理想），但我正在考虑构建一个 Chrome 扩展程序，它要求在另一个 div 之前插入一个 div（为了澄清，我的意思是在测试时我需要使用 Chrome 开发工具将 div 拖到另一个上方的扩展）。有没有办法在页面加载时使用 Javascript/JQuery（或其他可以通过 Chrome 扩展完成的方式）来执行此操作？

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

提前感谢您的帮助！

【问题讨论】：

标签： javascript jquery google-chrome html

【解决方案1】：

Here 是一个小示范。

正在使用的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 );
})();

【讨论】：

【解决方案2】：

jQuery 有一种非常简单的方法可以将一个节点移到另一个节点之前，您在问题中提到了这一点：

之前：

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

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

之后：

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

就 Chrome 而言，您可能需要进行一些挖掘以查看在您拨打电话时是否已加载 jQuery

【讨论】：

我想这意味着我面临的问题一定是 Chrome 是如何处理它的。我认为 JQuery 应该可以正常工作，但你永远不知道！