jQuery Clone Method

Is it possible to clone html element objects in JavaScript?

I have a html element (like select box input field) in a table. Now I want to copy the object and generate a new one out of the copy, and that with JavaScript or jQuery. I think this should work somehow but I’m a little bit clueless at the moment. Something like this (pseudo code):

oldDdl = $("#ddl_1").get(); newDdl = oldDdl; oldDdl.attr('id', newId); oldDdl.html(); 

10 Answers 10

The modern approach is to use the cloneNode function:

let new_element = element.cloneNode(true); 

where the Boolean indicates whether to also clone its child nodes or not.

Afterwards, you can add the cloned element to DOM somewhere. For example, you can use after() to insert the new element right after the original element:

Compatibility:

@AniketSuryavanshi I’m not sure about February 4th in particular, but compatibility looks perfect today

IDs and names will be duplicated. IDs NEED to be changed, names COULD be left as they are if duplicate names are expected.

Using your code you can do something like this in plain JavaScript using the cloneNode() method:

// Create a clone of element with id ddl_1: let clone = document.querySelector('#ddl_1').cloneNode( true ); // Change the id attribute of the newly created element: clone.setAttribute( 'id', newId ); // Append the newly created element on element p document.querySelector('p').appendChild( clone ); 

Or using jQuery clone() method (not the most efficient):

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want 

Yes, you can copy children of one element and paste them into the other element:

var foo1 = jQuery('#foo1'); var foo2 = jQuery('#foo2'); foo1.html(foo2.children().clone()); 

It’s actually very easy in jQuery:

$("#ddl_1").clone().attr("id",newId).appendTo("body"); 

Change .appendTo() of course.

You can use clone() method to create a copy..

Get the HTML of the element to clone with .innerHTML , and then just make a new object by means of createElement() .

var html = document.getElementById('test').innerHTML; var clone = document.createElement('span'); clone.innerHTML = html; 

In general, clone() functions must be coded by, or understood by, the cloner. For example, let’s clone this:

. If I delete the clone’s tags, should it also delete the original’s span tags? If both are deleted, the object references were cloned; if only one set is deleted, the object references are brand-new instantiations. In some cases you want one, in others the other.

In HTML, typically, you’ll want anything cloned to be referentially self-contained. The best way to make sure these new references are contained properly is to have the same innerHTML rerun and re-understood by the browser within a new element. Better than working to solve your problem, you should know exactly how it’s doing its cloning.

Full Working Demo:

Источник

Copying all HTML contents from one div to another using jQuery

Solution 2: Managed to get it working- thanks for all your answers 🙂 Solution 3: Try this: Solution 4: An example HTML Script Question: I am trying to do a thing that seems easy to me 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).

Copying all HTML contents from one div to another using jQuery

This question may seem as a duplicate one, but I cannot seem to find a solution for my problem.

I am fetching content from external websites using the iFramely API. Which works for almost all requested websites.

However, if I try to fetch for example a post from Reddit and display this in a sort of custom made ‘preview box’ the requested iFrame get rendered correctly, so far so good.

When I try to copy the HTML content of the ‘preview box’ in order to append it to another div using jQuery. It does not copy all HTML elements.

$('#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($(embed_preview_container).html()); . >); 

I’ve tried the jQuery functions:

• clone $(‘.embed-no-‘ + target_number).html($(embed_preview_container).clone());
• html $(‘.embed-no-‘ + target_number).html($(embed_preview_container).html());
• contents $(‘.embed-no-‘ + target_number).html($(embed_preview_container).contents());
• using append $(‘.embed-no-‘ + target_number).append($(embed_preview_container).html());

But all of these functions do not seem the copy the full «innerHTML» of the mentioned ‘preview box’ (see pictures below).

The copied HTML content inside the ‘other div’ with an empty body & head.

The actual content in side the ‘preview box’.

I must note here that this only seems to be te case for Reddit related content. It works for example with Soundcloud/Spotify/Bandcamp .

PS. I am using jQuery version 3.3.1

$("#copyToDiv").append($("#copyFromDiv").html()); 

 Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
 
Lorem Ipsum
 
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles
 
 
 Solution 3: 

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); . >); 

How to clone the contents of a div into another div with JavaScript?, Could you share the div code as well? Or you could simply try this if you have second div on page. document.getElementById(»SecondDv»).

Use jQuery clone() Method to Create a Copy of Matching Elements

jQuery: Use jQuery clone() Method to Create a Copy of Matching Elements, Child Elements
Duration: 6:20

Copy certain text from one div into another div

I want to be able to copy certain text from one div into another div.

The text is generated from a WordPress Plugin, and it generates 2 different divs, with the following classes 1 called .voting inactive and the second one called .voting.

The text generated is rating based is it will look something like: Rating 4.5/5, i ONLY want to take the 4.5 or whatever vote is generated and copy that into a div to display the result nicely.

I’m with @Starx on this one. But just to be a little more clear:

Managed to get it working- thanks for all your answers 🙂

   #target-rating      
5 (5 votes cast)
 
5 (5 votes cast)
   

var vote = $(".voting").text().split("/")[0]; 

Copy and paste text from a div to another [jQuery], I am trying to do a thing that seems easy to me but I’m not very familiar with javascript language and I can’t find any documentation to do what

Copy and paste text from a div to another [jQuery]

I am trying to do a thing that seems easy to me but I’m not very familiar with javascript language and I can’t find any documentation to do what I want.

Let’s say I have a code like this:

 Let's say I click on the "sourcea" div, the text contained in it should go in the "destination" div.

Unfortunately, I have no idea how to do it. Can you help me? And maybe also suggest me somewhere I can go and learn something more about this code?

Read more about JavaScript and jQuery events. What you need here is a .click() event on sourceA to handle your behaviour as follows:

Take a look at this example

var copyContentToDestinationClickHandler = function(event) < $('#destination').empty(); $('#destination').append($(event.target).text()); >$('#sourceA').click(copyContentToDestinationClickHandler); $('#sourceB').click(copyContentToDestinationClickHandler); 

Clone an entire div container on another page, This is possible through Javascript/jQuery, yes. Save that into a new file, then use jQuery’s .load() function like so.

Источник

jQuery Copy/Clone/Duplicate Html Elements

jQuery duplicate/copy/clone html element; In this jQuery tutorial you will learn how to copy selected HTML elements like div, span, button, paragraph tag etc using jQuery clone () method.

jQuery Copy/Clone/Duplicate Html Elements

The jQuery clone () method is used to create copies of the selected html elements. It also makes copies of it’s child nodes, texts and attributes. The clone () method is a easy way to copy the elements on a webpage.

Syntax

Parameters of clone() method

• True :- Specifies that the event handler should also be copied.
• False :- This is a default parameter. Specifies that the event handler should not be copied.

Example clone() method

This example will demostrate you how to copy selected html elements using clone () method.

     .container   
 
   

Output

This is simple example of clone method.

Note:Click here, to clone c_clone id of elements, and append them to the b_clone id of element

In the above clone() method example, First of all When you click on button that copy of selected html elements.

Recommended jQuery Tutorials

1. jQuery Text Method By Example
2. Get and Set Input, Select box, Text, radio Value jQuery
3. jQuery Replace Html Content, Text
4. jQuery Animate() Effect Method By Example
5. jQuery | Event MouseUp By Example
6. Event jQuery Mouseleave By Example
7. jQuery Event Mouseenter Example
8. Event jQuery MouseOver & MouseOut By Example
9. keyup jquery event example
10. Jquery Click Event Method with E.g.
11. Event jQuery. Blur By Example
12. jQuery form submit event with example
13. keydown function jQuery
14. List of jQuery Events Handling Methods with examples
15. Jquery Selector by .class | name | #id | Elements
16. How to Get the Current Page URL in jQuery
17. jQuery Ajax Get() Method Example
18. get radio button checked value jquery by id, name, class
19. jQuery Set & Get innerWidth & innerHeight Of Html Elements
20. jQuery Get Data Text, Id, Attribute Value By Example
21. Set data attribute value jquery
22. select multiple class in jquery
23. How to Remove Attribute Of Html Elements In jQuery
24. How to Checked Unchecked Checkbox Using jQuery
25. jQuery removeClass & addClass On Button Click By E.g.
26. To Remove whitespace From String using jQuery
27. jQuery Ajax Post Method Example
28. jQuery Ajax Get Method Example
29. To Load/Render html Page in div Using jQuery Ajax $.load
30. jQuery Sibling Methods – To Find Siblings Elements
31. jQuery Find Siblings Elements with Class, id

Author Admin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Источник