Jquery Duplicate Div into Another Div

jQuery duplicate DIV into another DIV

You'll want to use the clone() method in order to get a deep copy of the element:

$(function(){
  var $button = $('.button').clone();
  $('.package').html($button);
});

Full demo: http://jsfiddle.net/3rXjx/

From the jQuery docs:

The .clone() method performs a deep copy of the set of matched
elements, meaning that it copies the matched elements as well as all
of their descendant elements and text nodes. When used in conjunction
with one of the insertion methods, .clone() is a convenient way to
duplicate elements on a page.

Clone a div in another div using jQuery

Maybe copy their html?

var temp=$(".nav-previous").html();
$(".nav-previous").html($(".nav-next").html());
$(".nav-next").html(temp);

how to clone content of a div to another div

var a = $('#selector').html();
var b = $('#selector').html(a);

not sure I understood you properly but I think thats what you meant :)

How to duplicate div on click with jQuery?

Make use of .clone() to copy the div and .after() to append. Since you are using class you may want to copy only one div, in that case you should use .closest(). Also you need to pass a boolean parameter to clone so that all data and event handlers will be attached to cloned element.

$(function(){  $(".btn-copy").on('click', function(){    var ele = $(this).closest('.example-2').clone(true);    $(this).closest('.example-2').after(ele);  })})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="example-1">  <div class="example-2">     <p>Example one</p>    <p>Example two</p>
    <button class="btn-copy">Copy</button>  </div></div>

jQuery copy content from one div into another

I think you want a separate div within your #moreinfo block, or otherwise when you copy the hidden details you will erase your [X] close button. I'm not sure whether you are trying to preserve the original dummy image or copy it over with the clicked one, but you can copy the hidden text with something like this (I'm using html instead of text in case you have markup in there).

$('#details').html($(this).parent().find('p').html());

I would also maybe add a class to the hidden <p> values and reference it by that, in case you wanted more than one <p> tag in there.

JSFiddle: http://jsfiddle.net/dshell/8FYrs/

Copying all HTML contents from one div to another using jQuery

Alright, so I've found the solution/workaround to my own problem. Instead of copying the contents of the 'preview box', I stored the fetched HTML in a temporary variable, and appended the contents of this variable inside an 'another div' (this works).

Noteworthy, something strange that occurred to me while debugging is that the browser (in this case Chrome), does not render/display HTML correctly (see picture) (note the empty iFrame).

This is exactly what .html() copied. So long story short the following code worked for me:

// temporary variable for storing html.
let currentSnippet = '';

$('#btn-add-extern-snippet').click(function() {
    let embed_preview_container = $('#embed-preview');
    let embed_target_number = $('#embed-target-number');
    let target_number = $(embed_target_number).val();

    $('.embed-no-' + target_number).html(currentSnippet);
    ...
});

replace div text with another div in div jquery onload

Problem is when you use text() it will return the first item in the collection. It has no clue you want to grab it for other elements. So you need to code it to deal with the relationships.

You will have to loop over each group and select each one in the group.

$(".main").each( function () {  var elem = $(this)  var text = elem.find(".second").text()  elem.find(".first").text(text)})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="main"><div class="first">A text</div><div class="second">B text</div></div>
<div class="main"><div class="first">C text</div><div class="second">D text</div></div>

jquery clone div and append it after specific div

You can use clone, and then since each div has a class of car_well you can use insertAfter to insert after the last div.

$("#car2").clone().insertAfter("div.car_well:last");

Copy the content of a div into another div

Firstly we are assigning divs into variables (optional)

var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');

Now just assign mydiv1's content to mydiv2.

secondDivContent.innerHTML = firstDivContent.innerHTML;

DEMO
http://jsfiddle.net/GCn8j/

COMPLETE CODE

<html>
<head>
  <script type="text/javascript">
    function copyDiv(){
      var firstDivContent = document.getElementById('mydiv1');
      var secondDivContent = document.getElementById('mydiv2');
      secondDivContent.innerHTML = firstDivContent.innerHTML;
    }
  </script>
</head>
<body onload="copyDiv();">
  <div id="mydiv1">
      <div id="div1">
      </div>
      <div id="div2">
      </div>
  </div>

  <div id="mydiv2">
  </div>
</body>
</html>

---

Related Topics