Copy the content of a div into another div

Asked
Active3 hr before
Viewed126 times

8 Answers

content
90%

Use the append() method to copy the element as its child.,Select the target element where div eleemtn is copied.,Use the appendTo() method to copy the element as its child.,First, select the div element which need to be copy into another div element.

88%

Firstly we are assigning divs into variables (optional), Don't forget var firstDivContent and so on. Exposing the variables to the global scope is bad practice – Eric Herlitz Nov 24 '13 at 9:43 , Fast intercontinental Remote Desktop Sessions ,Now just assign mydiv1's content to mydiv2.

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;

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>
load more v
72%

In this blog we are learn how to copy one div and paste into another div. you can do this using many types of jquery function. but here we are use "clone()" and "append()" function. using clone function you can copy any content. this is add more example. you can click on button and copy one div then append into parent div. ,Laravel Arr hasAny() function Example,I hope it can help you...,$('body').on("click", '.add-btn', function() {

<!DOCTYPE html>
<html>

<head>
   <title>How to copy contents of a div into another div?</title>

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<body>
   <div class="row">
      <div class="col-md-12 parent-div">
         <div class="row" id="copy-this-div">
            <div class="col">
               <input type="text" class="form-control" placeholder="First name">
            </div>
            <div class="col">
               <input type="text" class="form-control" placeholder="Last name">
            </div>
         </div>
      </div>
      <div class="col-md-12">
         <button type="button" class="btn btn-success add-btn">Add Field</button>
      </div>
   </div>
</body>

</html>
load more v
65%

Here’s the bonus question:  Can this be done across pages through an iframe?  I.E. pulling div1 into the page through an iframe and then copying its contents into div2.  ,This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.,I have two divs on my page: div1 and div2.  I want to automatically copy the contents of div1 into div2 as the page is loading.,The active forums are here.

<div id="div1">
   ...lots of html…
</div>

<div id="div2">
</div>
load more v
75%

How to copy contents of a div into another div? , <title>How to copy contents of a div into another div?</title> ,In this blog we are learn how to copy one div and paste into another div. you can do this using many types of jquery function. but here we are use "clone()" and "append()" function. using clone function you can copy any content. this is add more example. you can click on button and copy one div then append into parent div. , var copyContent = $("#copy-this-div").clone();

 <!DOCTYPE html>
 <html>

 <head>
    <title>How to copy contents of a div into another div?</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 </head>

 <body>
    <div class="row">
       <div class="col-md-12 parent-div">
          <div class="row" id="copy-this-div">
             <div class="col"> <input type="text" class="form-control" placeholder="First name"> </div>
             <div class="col"> <input type="text" class="form-control" placeholder="Last name"> </div>
          </div>
       </div>
       <div class="col-md-12"> <button type="button" class="btn btn-success add-btn">Add Field</button> </div>
    </div>
 </body>

 </html>
load more v
40%

Need some jquery help copying a DIV into another DIV and hoping that this is possible. I have the following HTML:,And then I have another DIV in another location in my page and I would like to copy the 'button' div into the following 'package' div:,You'll want to use the clone() method in order to get a deep copy of the element:,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.

Need some jquery help copying a DIV into another DIV and hoping that this is possible. I have the following HTML:

  <div class="container">
     <div class="button"></div>
  </div>

And then I have another DIV in another location in my page and I would like to copy the 'button' div into the following 'package' div:

<div class="package">

   Place 'button' div in here

</div>
load more v
22%

let content = $('div#first').html();
$('div#second').html(content);
60%

So the the JS function should take 2 values, that is the Source input field ID and the Target DIV ID and copy the contents as is being typed from the Source to the Target.,We need a JavaScript function that will Copy the content of an input field as being typed into the target DIV. This copying needs to be letter by letter in real time, so as a letter is added on the source input field this letter needs to be added at same time to the target DIV and vis versa if a letter is removed it needs to be removed from target DIV.,It’s even better too when the JavaScript is not mixed in with the HTML, achieving a beneficial separation of concerns.,Taking things further, we can protect the global namespace by placing the code in an immediately invoked function expession (IIFE), and have the desired target attached to the source event via closure, with:

You mean something like this?

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input id="source" type="text" oninput="copyData('source', 'target')"  />
    <div id="target"></div>
    <script type="text/javascript">
      function copyData(sourceId, targetId) {
        var data = document.getElementById(sourceId).value;
        document.getElementById(targetId).innerHTML = data;
      }
  </script>
  </body>
</html>
load more v