js如何将一个div移动到另一个div后面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js如何将一个div移动到另一个div后面相关的知识，希望对你有一定的参考价值。
参考技术A 可以，用创建和插入元素<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<meta charset="utf-8" />
<style>
div border: 1px solid #666;padding: 5px; margin: 5px;
#divs width: 200px;
#div5 background: #ccc;
</style>
</head>
<body>
<div id="divs">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>
<script>
var oDivs=document.getElementById('divs');
var oDiv3=document.getElementById('div3'); //获取到div3，因为等下要把创建的div插入到div3前面。
var oDiv5=document.createElement('div'); //创建一个div元素。
oDiv5.id='div5'; //id样式可以先在样式表中写好，然后赋值一个id给创建出来的div元素。
oDiv5.innerHTML='<span>这是被创建出来的div5</span>'; //给创建出来的div添加内容，内容中可以有html标签嵌套。
oDivs.insertBefore(oDiv5,oDiv3); //在大的div元素下插入创建出来的元素，第一个参数是创建的div，第二个参数是要插入到哪个div前面。
</script>
</body>
</html>
如何将一个div的内容克隆到另一个div
【中文标题】如何将一个div的内容克隆到另一个div【英文标题】：how to clone content of a div to another div 【发布时间】：2011-04-29 11:53:50 【问题描述】：我想使用 jquery 克隆将选定 div 的内容复制到另一个 div。 但我不想将它附加到任何地方
我的意思是当我们用 jquery 克隆一个 div 时（如果我错了，请纠正我）我们必须设置它的位置，它会动态创建一个显示的新分区。
但我想获取选定的div的内容并将其复制到另一个预设的div
【问题讨论】：
谢谢你们，这是我真正想要发生的事情jsfiddle.net/pahnin/c2p54/2 【参考方案1】：var a = $('#selector').html();
var b = $('#selector').html(a);
不确定我是否理解正确，但我认为这就是你的意思:)
【讨论】：
这也可以写成：$('#selectorDestination').html($('#selectorSource').html());。避免声明变量。
我们唯一应该小心的是我们不应该在 html 中复制 id
@dustin 是的，那是一样的，但我想，因为他要求不要穿上 dom，“我不想在任何地方附加它”:) 这是最好的前进方式【参考方案2】：
我不同意。克隆可以在不应用内容的情况下保存数据。
看这里：
http://www.jsfiddle.net/dactivo/FqffM/
var mylayer=$('.hello').clone();
这里你可以随意管理变量“mylayer”，它不在DOM中。
【讨论】：
当然，html() 是一个很好的方法，但是很高兴知道 clone() 可以在不包含在 DOM 中的情况下进行管理Clone 也复制了容器元素，我认为@pahnin 不想要。
好的，我认为真正的问题是你不想设置它的位置。 html() 非常适合这个。【参考方案3】：
$("#from").clone().appendTo($("#to"));
但它不会删除/隐藏主 DIV。要隐藏主 div，请执行以下操作：
$("#from").clone().appendTo($("#to"));
$("#from").remove();
【讨论】：
我认为你没有理解我的问题。【参考方案4】：$(".from").click(function ()
$(".from").removeClass("CloneMe");
$("#to").html('');
$(this).addClass("CloneMe");
$(".CloneMe").clone().appendTo("#to");
);
您可以在单击（或其他事件）时添加一个硬编码以克隆的类。在此示例中，有一个包含样式内容（div 等）的相同类名称列表 - 添加 .CloneMe 类，但首先删除该类以清空 div，以防用户选择不同的项目。 ) 为了安全起见，也可以删除任何 html。然后使用 (this) 应用类以避免抓取具有该类名称的所有项目，最后附加到 div。结果是用户可以选择具有该类名称的任何项目并将其填充到容器中。 - 我想为容器使用一个类可以让你在多个地方填充它。
【讨论】：
以上是关于js如何将一个div移动到另一个div后面的主要内容，如果未能解决你的问题，请参考以下文章