如何使用javascript交换html div元素的位置
使用JavaScript交换HTML div元素的位置可以通过以下步骤实现：
- 首先，通过JavaScript获取需要交换位置的两个div元素的引用。可以使用
document.getElementById()方法通过元素的id属性获取元素的引用。 - 使用JavaScript的
parentNode.insertBefore()方法将第一个div元素插入到第二个div元素之前。该方法接受两个参数，第一个参数是要插入的元素，第二个参数是参考元素。 - 使用JavaScript的
parentNode.insertBefore()方法将第二个div元素插入到第一个div元素之前。
下面是一个示例代码：
// 获取需要交换位置的两个div元素的引用
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
// 交换位置
div1.parentNode.insertBefore(div1, div2);
div2.parentNode.insertBefore(div2, div1);在上面的代码中，假设第一个div元素的id属性为"div1"，第二个div元素的id属性为"div2"。通过document.getElementById()方法获取到这两个元素的引用，然后使用parentNode.insertBefore()方法将它们交换位置。
这种方法适用于任意两个div元素的交换位置，无论它们在文档中的位置如何。
相关·内容
5回答
如何让两个div拥有相同的borderRadius？
javascript、html、border
这是匹配两个div的正确方法吗？
var div2 = document.getElementsByClassName("div2");
div2.style.borderRadius = "100px"
document.getElementById("div1").style.borderRadius = div2.style.borderRadius;
只是个javascript的新手。
浏览 0提问于2015-06-29得票数 1
5回答
使用JavaScript获取DIV的内容
javascript
我有两个名为DIV1和DIV2的DIV，DIV1由动态内容组成，DIV2为空。我需要在DIV2中显示DIV1的内容。我该怎么做呢。
我用下面的方式编码，这是不起作用的。任何人请改正它。
<script type="text/javascript">
var MyDiv1 = Document.getElementById('DIV1');
var MyDiv2 = Document.getElementById('Div2');
MyDiv2.innerHTML = MyDiv2;
</script>
浏览 9提问于2011-12-28得票数 43
回答已采纳
2回答
为什么单击事件会被触发两次？
javascript、html、events、addeventlistener
有人能告诉我，为什么事件会因以下代码而被触发两次：请打开控制台，火狐或chrome有控制台，并在单击“div1 1”后查看结果，然后事件遍历顺序为：
div3
div2
div1
div3
div2
div1
如我所知，捕获阶段可以从上到下，冒泡阶段可以从目标节点到父节点。
我的问题是，为什么，它按相同的顺序发射了2次？
HTML：
<div id="div1">
<div id="div2">
<div id="div3">
&l
浏览 5提问于2014-11-19得票数 2
回答已采纳
2回答
没有z索引的堆叠？
html、css、z-index
我在没有z-index的情况下如何堆叠HTML元素进行了大量的搜索，但是没有找到任何具体的东西。我确实发现，没有z索引的堆叠是按照HTML的出现顺序进行的。
此规范对IE有效吗？我有两个包含在另一个div中的div。这两个div都有绝对位置：
<div>
<div id"div1" style="position:absolute"></div>
<div id"div2" style="position:absolute"></div>
</d
浏览 0提问于2013-01-04得票数 6
回答已采纳
3回答
使用对象构造函数设置html元素的样式
javascript、css、constructor
我正在练习使用构造函数/对象。我想使用这种类型的对象动态地使用CSS对一些div进行样式化。我正试图用document.getElementById获取document.getElementById，但无法对它们进行样式设计。我得到了错误消息“无法设置未定义的backgroundColor”。看起来我实际上没有得到我想要的元素，或者它没有被保存到变量中。
我如何得到元素并通过构造函数传递它？
<div id='div1'>div1</div>
<div id='div2'>div2</div>
function
浏览 2提问于2014-01-17得票数 0
回答已采纳
2回答
我正在研究一种解决方案，在这个解决方案中，javascript改变的是div1而不是div2。此代码适用于getElementbyId，但不适用于getElementbyClassName。为什么这不起作用？
function refer(Div1, Div2) {
if (document.getElementByClassName('Div1')) {
if (document.getElementByClassName('Div1').style.display == 'block') {
v
浏览 0提问于2016-02-15得票数 0
2回答
如何从组中随机选择一个div并为其分配事件
javascript
我尝试从一个组中随机选择一个div，并将一个click事件分配给所选的那个。下面是我到目前为止写的代码。
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
<div id="div4"> </div>
<script>
var div1 = document.getElementById("div1");
var di
浏览 0提问于2012-10-28得票数 0
回答已采纳
5回答
使用vanilla js在每次单击时更改div
javascript、button
我有两个div2，div1和div2。我的目标是让它们在每次点击按钮时改变
<div>
<button onclick="changeText();" id="changeText" data-text="Enjoy!">Hello!</button>
<div id="div1" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
浏览 0提问于2021-05-03得票数 0
5回答
jquery $('#my_id')和document.getElementById('my_id')之间的区别？
javascript、jquery
我认为$('#my_id1')和document.getElementById('my_id1')是一样的。但这并不是亲生的。有什么关系？
(function( $ ) {
$.fn.simple_hide_function = function() {
var $t = this;
$t.hide();
};
})( jQuery );
$(window).load(function () {
var $div1 = $('#my_id1');
var $div2 = document.getElementById('
浏览 5提问于2011-12-29得票数 2
回答已采纳
3回答
下面这两种语法有什么区别-
document.object和document.getElementById().
我想知道什么时候使用哪个语法？
例如-
CODE1(用<form>实现)
<body onload="document.forms[1].innerHTML='hi';">//Alt: onload="document.getElementById('f1').innerHTML='hi';"
<form id=f1>
<input />
<
浏览 0提问于2013-10-03得票数 5
回答已采纳
3回答
在jquery中向下移动元素
javascript、jquery、html、css
我有两个像这样的元素
<div class="div1">Slider</div>
<div class="div2">User Profile</div>
我希望这个元素能像这样加载(使用: jquery，javascript，css)
<div class="div2">User Profile</div>
<div class="div1">Slider</div>
浏览 1提问于2018-12-12得票数 2
回答已采纳
4回答
我正在使用jQuery 1.9.0，我的html是：
<div id='div1'>
</div>
<div id='div2'>
</div>
我的js：
var input = $("<input type='text'>");
$('#div1').html(input);
$('#div2').html(input);
我对这段代码的理解是
输入是一个jQuery对象，我可以使用它分别设置div1和div2，就像我可以将一
浏览 2提问于2013-01-23得票数 4
回答已采纳
1回答
getElementById()的另一个令人困惑的行为
javascript、innerhtml
试试这个脚本：。为什么Firefox和IE的输出不同？
HTML：
<div id="div1">
<div id="div2"><div id="data">data</div></div>
<div id="div3">a-</div>
</div>
Javascript：
var data = document.getElementById("data");
document.getElementById("
浏览 4提问于2012-07-17得票数 3
回答已采纳
3回答
如何将新元素追加到两个不同的位置JavaScript ES6
javascript、ecmascript-6
我的目标是将一个新元素添加到两个不同的位置。我有两个div2，ID分别为div1和div2。我想将新创建的span元素附加到两个div中。
document.querySelector('#div1').appendChild(span);
这可以很好地工作，但问题是
document.querySelector('#div2').appendChild(span);
运行第二个appendChild时，它会从div1中删除跨度。如何将span元素添加到这两个位置？
(为了可视化执行，我添加了一个setTimeout)
const span = docume
浏览 0提问于2018-11-05得票数 0
2回答
CSS 3动画不会在第一次调用时执行
javascript、html、css
所以..。我有这个小网页，有两个div，一个按钮，两个css类和一个javascript函数。
这个想法是，当按下按钮时，函数会更改div的css类，并通过一个很好的过渡将其隐藏起来。当再次按下它时，它会执行相反的操作：
HTML：
<div id="div1" >
<div id="div2" >
Here be HTML stuffs.
</div>
</div>
javascript：
hideNShow(){
var w = $('#div2');
var heig
浏览 37提问于2015-05-29得票数 1
3回答
如何在Javascript中根据变量显示特定的DIV
javascript、html
我有一个页面，它加载以下Javascript对象字段
var fields = {"age":"on","email":"useremail@gmail.com","firstname":"John","lastname":"Smith","officialrules":"on","question":"a"};
如您所见，最后一个属性包含变量问号和值a。
在HTML中，我有三个div，每个div都包含
浏览 5提问于2014-01-30得票数 0
1回答
Javascript事件处理程序不会更改另一个元素的事件处理程序
javascript、html、css、event-handling、dom-events
我有两个div2，div1和div2。单击div2时，我希望更改div1的"onmouseover“处理程序。下面是小提琴代码()：
<div id='div1'
onmouseover='this.style.color=`purple`'
onmouseout='this.style.color=`black`'
onclick='this.onmouseover=null; this.onmouseout = null;'>
hello
</div>
<br>
<div
浏览 7提问于2022-01-25得票数 1
5回答
如何用javascript更改div内容
javascript、html、function、radio-button、onchange
这看起来很简单，但我不知道我到底在做什么。我有2个单选按钮，取决于选择哪个按钮，div的内容将发生变化。现在我有两个div在一个父div里面，但是它只会隐藏一个div并显示另一个div。如果他们不占用空间，即使他们是隐形的，这也不会是坏事。
HTML：
<div>
<form role="form">
<div>
<div class="radio" id="radioSelection" onchange="chooseDiv()">
浏览 5提问于2015-06-29得票数 3
回答已采纳
5回答
JavaScript 'contenteditable‘-获取/设置Caret位置
javascript、contenteditable
我读过一些关于定位插入符号的帖子，但似乎没有人回答我的具体问题。
我有两个div (div1和div2)
div1 =不可编辑的div
div2 =内容可编辑的div
两个div都包含完全相同的内容。
当用户单击div1时，它会被隐藏，div2会出现在准确的位置，用户可以进行编辑。
The problem：我希望插入符号出现在div2上的确切位置上，作为div1
因此，我需要一些方法来读取用户单击getCaretLocation(in_div_id)的位置，然后当div2出现时，将光标/插入符号放在相同的位置，因此需要一个div1和setCaretLocation(
浏览 4提问于2010-05-16得票数 16
2回答
为forEach方法中的数组项赋值'this‘(javascript)
javascript、arrays、foreach、this
我在一个数组上使用了一个forEach方法，我想让数组的项具有值'this‘。
当我将下面代码中的'item‘更改为= 'this’时，没有任何反应。
有没有可能用forEach方法做到这一点，或者我正在尝试做的事情是不可能的？
我已经从实际使用的代码中简化了问题，以免增加更多的复杂性(在实际代码中，数组项控制一系列滚动触发器，并且我需要每个数组项都具有值'this')。
在下面的例子中，我只需要使用'this‘来改变背景颜色。
Codepen链接在这里
var div1 = document.getElementById('div1
浏览 0提问于2017-10-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
