How to clone the html content using jquery?

Question

I have the following html content:

<div data-test='sectionA'>
    <input type="text" />
    <strong>sfdsfds</strong>
    <p>dffdfdsf</p>
</div>

I need to clone only the strong and p elements from the html content above. Here is my attempt:

First I need to identify the section:

if($("div").data("test") == "sectionA")
{
     $(this).children().not("input").each(function()
     {
           alert($(this).html().clone());
           /* firefox says clone is not a function 
              and I'm not getting <strong>dfadfa</strong>
              or the <p>sfdasdfsd</p> clone copy */

      });
}

I'm not used to jQuery, but I think that .html() returns a string. And you can only clone HTML elements, not strings. Try removing that — Oriol
– Oriol, Commented Feb 10, 2013 at 20:43
html function returns string not nodes/objects so you have nothing to clone. — Wojciech Jasiński
– Wojciech Jasiński, Commented Feb 10, 2013 at 20:44

pwolaq · Accepted Answer · 2013-02-10 20:45:26Z

1

var $div =  $("div[data-test=sectionA]");
var $strong = $('strong', $div).clone();
var $p = $('p', $div).clone();

answered Feb 10, 2013 at 20:45

pwolaq

6,40221 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to clone the html content using jquery?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related