CODEWITHSUNDEEP
javascriptjquerycss
loyalflow
loyalflow

Reputation: 14919

How to copy a div and its content, and append it somewhere else but keep original hidden

I have a div element like:

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

It is hidden or display:none by default on page load.

I know want to append this div and its content somewhere else, and make it visible, but the original should remain not visible (or I can remove it).

How can I do this?

I'm currently appending it but it is showing up in 2 places.

Upvotes: 0

Views: 4740

Answers (3)

Bergi
Bergi

Reputation: 665276

If it is OK to remove it (as you said), just append it to the other element. The element will automatically be removed from the first place and never show up there.

$("#abc").appendTo(place2).show();

Upvotes: 0

Alexander
Alexander

Reputation: 23537

Deep clone, append, remove id attribute and show.

​​$("div#abc")
  .clone()
  .appendTo("div#other")
  .removeAttr("id")
  .show();​​​​​​

Remove or modify your id attribute, having multiple elements with same id is troublesome. If you happen to use CSS classes you could also use it this way:

.template {
  display: none;
}


​​$("div.template")
  .clone()
  .appendTo("div#other")
  .removeClass("template");​​​​​​

Upvotes: 1

anjunatl
anjunatl

Reputation: 1057

Take the HTML from your hidden div and append it to your target using .html() and .append()

var html = $('div.hidden-div').html();
$('div.target-div').append(html);

To show the target div then remove the old one, do the following:

$('div.target-div').show();
$('div.hidden-div').remove();

Upvotes: 1

Related Questions