How to move an element into another element?

2018-12-31 07:22发布

站内问答 / JavaScript
574 13 6

I would like to move one DIV element inside another. For example, I want to move this (including all children):

<div id="source">
...
</div>

into this:

<div id="destination">
...
</div>

so that I have this:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

13条回答
何处买醉
2楼-- · 2018-12-31 07:25

You may also try:

$("#destination").html($("#source"))

But this will completely overwrite anything you have in #destination.

查看更多
0人赞 添加讨论(0) 举报
人间绝色
3楼-- · 2018-12-31 07:26

Old question but got here because I need to move content from one container to another including all the event listeners.

jQuery doesn't have a way to do it but standard DOM function appendChild does.

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

Using appendChild removes the .source and places it into target including it's event listeners: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

查看更多
0人赞 添加讨论(0) 举报
不流泪的眼
4楼-- · 2018-12-31 07:33

You may want to use the appendTo function (which adds to the end of the element):

$("#source").appendTo("#destination");

Alternatively you could use the prependTo function (which adds to the beginning of the element):

$("#source").prependTo("#destination");

Example:

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});
#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

查看更多
0人赞 添加讨论(0) 举报
孤独总比滥情好
5楼-- · 2018-12-31 07:35

If the div where you want to put your element has content inside, and you want the element to show after the main content:

  $("#destination").append($("#source"));

If the div where you want to put your element has content inside, and you want to show the element before the main content:

$("#destination").prepend($("#source"));

If the div where you want to put your element is empty, or you want to replace it entirely:

$("#element").html('<div id="source">...</div>');

If you want to duplicate an element before any of the above:

$("#destination").append($("#source").clone());
// etc.
查看更多
0人赞 添加讨论(0) 举报
皆成旧梦
6楼-- · 2018-12-31 07:38

What about a JavaScript solution?

Declare a fragment:

var fragment = document.createDocumentFragment();

Append desired element to the fragment:

fragment.appendChild(document.getElementById('source'));

Append fragment to desired element:

document.getElementById('destination').appendChild(fragment);

Check it out.

查看更多
0人赞 添加讨论(0) 举报
春风洒进眼中
7楼-- · 2018-12-31 07:38

Ever tried plain JavaScript... destination.appendChild(source); ? 

onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)