jQuery: How to select all divs specific class and append everything inside the div to a new div

Question

I am building a style guide for a application. I have several examples of different widgets. I have wrapped each html block that I want to use as a snippet with the class "snippet". I have a second empty div below each example widget with the class "example". I am trying to use jQuery to select all the html blocks with the code snippet, grab everything inside the div and insert it inside the empty div (wrapped in pre and code tags).

Please see below for example:

<div class="panel panel-default">
    <div class="snippet panel-body">
        <h1>H1 Header Example</h1>
        <h2>H2 Header Example</h2>
        <h3>H3 Header Example</h3>
        <h4>H4 Header Example</h4>
        <p>
            Here is a p tag with a <a href="#">Link</a>
        </p>
    </div>
</div>
<div class="example">
</div>

Answer 1

have a second empty div below each example widget with the class "example". I am trying to use jQuery to select all the html blocks with the code snippet, grab everything inside the div and insert it inside the empty div (wrapped in pre and code tags).

If interpret Question correctly , try using .each() , .innerHTML , textarea element

 $(".example").each(function(i, el) { el.innerHTML = "<textarea style=width:400px;height:200px>" + $(".snippet")[i].innerHTML + "</textarea>" }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Header Example</h1> <h2>H2 Header Example</h2> <h3>H3 Header Example</h3> <h4>H4 Header Example</h4> <p> Here is ap tag with a <a href="#">Link</a> </p> </div> </div> <div class="example"> </div> 

---

If rendered html is not to be edited , could add disabled attribute to string which renders textarea element

 $(".example").each(function(i, el) { el.innerHTML = "<textarea style=width:400px;height:200px disabled=true>" + $(".snippet")[i].outerHTML + "</textarea>" }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Header Example</h1> <h2>H2 Header Example</h2> <h3>H3 Header Example</h3> <h4>H4 Header Example</h4> <p> Here is ap tag with a <a href="#">Link</a> </p> </div> </div> <div class="example"> </div> 

Answer 2

The reason you are getting this error is because [0] returns the plain Dom object not a jquery one.

$('.snippet').each(function(i, item){ 
   $(item).next().text($(item).html());
  }
);

Answer 3

使用$('.example').html($('.snippet').html());

Answer 4

Did you mean something like this?

 $(".example").append("<pre><code/></pre>"); $(".example code").html($(".snippet").html().replace(/</g, "&lt;").replace(/>/g, "&gt;")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Header Example</h1> <h2>H2 Header Example</h2> <h3>H3 Header Example</h3> <h4>H4 Header Example</h4> <p> Here is ap tag with a <a href="#">Link</a> </p> </div> </div> <div class="example"> </div> 

---

More elaborately, you could make this more dynamic: generate .example after each snippet and fill it with the code from the preceding snippet.

 $(".snippet").each(function() { var $this = $(this), ex = $("<div></div>").addClass("example").html(function() { return "<pre><code>" + $this.html().replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</pre></code>"; }); $this.parent("div").after(ex); }); 

 .example { background: #ccc; text-shadow: 0 1px white; } .example pre {padding: 0;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Header Example</h1> <h2>H2 Header Example</h2> <h3>H3 Header Example</h3> <h4>H4 Header Example</h4> <p> Here is ap tag with a <a href="#">Link</a> </p> </div> </div> <div class="panel panel-default"> <div class="snippet panel-body"> <h1>H1 Another Header Example</h1> <h2>H2 Something similarHeader Example</h2> <h3>H3 Bananas Header Example</h3> <p> Here is ap tag with a <a href="#">Link</a> and guess what, even a <textarea disabled>I like turtles</textarea> </p> </div> </div> 

Answer 5

At the top of your html file add this link

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

And at the bottom at this code to copy the div content and put it in ".example" div

 <script>
  $(document).ready(function () {  
     $('.example').html($('.snippet').clone()); 
    //$('.panel  .snippet').remove(); // use this portion to remove the previous div
   });
</script>