Is it possible to clone html element objects in JavaScript JQuery

Question

I am looking for some tips on how to solve my problem    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

User · Answer

It s actually very easy in jQuery       ddl 1   clone   attr  id  newId  appendTo  body      Change  appendTo   of course

User · Answer

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       Proof  http   jsfiddle net de9kc

User · Answer

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   lt div gt Hello   lt span gt name  lt  span gt  lt  div gt    If I delete the clone s  lt span gt  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   x000D   x000D  function cloneElement         var html   document getElementById  test   innerHTML      var clone   document createElement  span        clone innerHTML   html      document getElementById  clones   appendChild clone     x000D   lt span id  test  gt Hello    lt  span gt  lt br gt  lt br gt    lt span id  clones  gt  lt  span gt  lt br gt  lt br gt    lt input type  button  onclick  cloneElement     value  Click Here to Clone an Element  gt  x000D   x000D   x000D

User · Answer

Try this       foo1   html     foo2   children   clone

User · Answer

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

User · Answer

In one line       selector   clone   attr  id   newid   appendTo   newPlace

User · Answer

You need to select   foo2  as your selector  Then  get it with html     Here is the html     lt div id  foo1  gt    lt  div gt   lt div id  foo2  gt       lt div gt Foo Here lt  div gt   lt  div gt     Here is the javascript        foo2   click function           alert  clicked        var value   this  html            foo1   html value          Here is the jsfiddle  http   jsfiddle net fritzdenim DhCjf

User · Answer

You can use clone   method to create a copy        foo1   html      foo2  gt  div   clone        FIDDLE HERE

User · Answer

With native JavaScript   newelement   element cloneNode bool    where the Boolean indicates whether to clone child nodes or not   Here is the complete documentation on MDN

[javascript] Is it possible to clone html element objects in JavaScript / JQuery?

Examples related to javascript

Examples related to jquery

Examples related to clone

Examples related to elements