CODEWITHSUNDEEP
javascriptjquery
Linesofcode
Linesofcode

Reputation: 5891

jQuery duplicate item inside div

I have the following HTML structure:

<div id="container">
     <div class='label-item-text drag' data-type='text'>
         <div>Right click on me and check the HTML of the duplicated</div>
     </div>
</div>

And I'm trying to duplicate the items inside #container. Unfortunately is not working as I expect.

A) My code duplicates all the items inside, when actually I have only selected one

B) I can't duplicate properly

The code that duplicates all items is the following.

$('#container').append($dragRightClick.parent().html());

Well, the parent() of $dragRightClick is the #container, so I understand the reason why it duplicate all the items...

What I want to duplicate is only the div inside the #container, that means:

<div class='label-item-text drag' data-type='text'>
    <div>Right click on me and check the HTML of the duplicated</div>
</div>

But what I've got so far is only:

<div>Right click on me and check the HTML of the duplicated</div>

The following code outputs the above code:

console.log("Clone: " + $dragRightClick.clone().html());
console.log("HTML: " + $dragRightClick.html());

You can check the full problem in JSFiddle.

Upvotes: 5

Views: 948

Answers (2)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

Use outerHTML for this purpose:

Replace:

$('#container').append($dragRightClick.parent().html());

with:

$('#container').append($dragRightClick[0].outerHTML);

UPDATED FIDDLE

You can also use this jquery plugin written for outerHTML:

http://css-tricks.com/snippets/jquery/outerhtml-jquery-plugin/

Upvotes: 0

laruiss
laruiss

Reputation: 3816

You should use 

$('#container').append($dragRightClick.clone());

instead of this :

$('#container').append($dragRightClick.parent().html());

See updated JSFiddle

Upvotes: 1

Related Questions