How to Clone and Change Id

How to clone and change id?

$('#cloneDiv').click(function(){

  // get the last DIV which ID starts with ^= "klon"
  var $div = $('div[id^="klon"]:last');

  // Read the Number from that DIV's ID (i.e: 3 from "klon3")
  // And increment that number by 1
  var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

  // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
  var $klon = $div.clone().prop('id', 'klon'+num );

  // Finally insert $klon wherever you want
  $div.after( $klon.text('klon'+num) );

});

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

<button id="cloneDiv">CLICK TO CLONE</button> 

<div id="klon1">klon1</div>
<div id="klon2">klon2</div>

Clone div and change id

var div = document.getElementById('div_id'),
    clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);

js how to change id inside cloned form with its own new id

Since you have jQuery, I would do something like this:

var original = $("#duplicater1");

function duplicate() {
    var countCopies = $("[id^='duplicater']").length + 1;
    var cloned = original.clone();
    var cloned.attr("id", "duplicater" + countCopies);
    $(cloned).find("[id]").each(function(){
        var current = $(this);
        var currentId = current.attr("id");
        var ids = $("[id='" + currentId + "']");
        if(ids.length > 1 && ids[0]==this){
            var newId = currentId.substring(0, currentId - 1);
            current.attr("id", newId + countCopies);
        }

    });
    original.parent().append(cloned);

}

Change inner elements id during clone

Yes.. its totally possible as follows:

var clone = $("#selection").clone();
clone.attr("id", newId);

clone.find("#select").attr("id","select-"+length);

//append clone on the end
$("#selections").append(clone); 

Cloning a div and changing the id's of all the elements of the cloned divs

I did the following and solved my problem:

var vl_cnt =1; //Initial Count
var original_external_int_div = document.getElementById('ext_int_div_1'); //Div to Clone
    function addVL(){
        var clone = original_external_int_div.cloneNode(true); // "deep" clone
        clone.id = "ext_int_div_" + ++vl_cnt; // there can only be one element with an ID
        original_external_int_div.parentNode.append(clone);
        var cloneNode = document.getElementById(clone.id).children[0].firstElementChild.firstElementChild;
        cloneNode.innerText = "External Interface "+vl_cnt;  //Change the Header of the Cloned DIV
        $(clone).find("*[id]").each(function(){
           $(this).val('');
           var tID = $(this).attr("id");
           var idArray = tID.split("_");
           var idArrayLength = idArray.length;
           var newId = tID.replace(idArray[idArrayLength-1], vl_cnt);
           $(this).attr('id', newId);
        });
        document.getElementById("vl_count").value = vl_cnt; //Keep track of the number of div being cloned
        window.scrollTo(0,document.body.scrollHeight);

Thank you @ProblemChild for giving me the pointer in the right direction, I cannot upvote @ProblemChild for providing partial solution.

Change id of clone children in jQuery

$clone.$('#invoicing-row-descr-99').attr("id", "newID");

but then it tells me that $clone is not a function.

Because $clone is an object. Just use attr or prop for the cloned element:

$clone.attr("id", "newID");//change cloned element id

---

As per your comment, use like this:

$clone.find('your_element').attr("id", "newID");

Jquery Clone and Update All ids

This would do it and create a clone like:

<div id="wrapper2">
  <p id="test2">Hello</p>
  <p id="my-awesome-id2"></p>
</div>

$('div').clone().filter(function() {  $(this).prop('id', $(this).prop('id').replace('1', '2')).children().filter(function() {    return $(this).prop('id', $(this).prop('id').replace('1', '2'))  });  return $(this)}).appendTo('body')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id='wrapper1'>  <p id='test1'>Hello</p>  <p id='my-awesome-id1'></p></div>

Change ID's of child elements in JavaScript when cloning an element

Your code almost works, but you missed one thing: the first and last elements aren't the ones you are looking for (These are not the droids... sorry, I couldn't help it). The first and the last elements are #text nodes, not HtmlElement ones.

you can modify your code to make it work:

function addItemRow(){
    var original = document.getElementById('profile-row' + i);
    var clone = original.cloneNode(true);
    i++;
    clone.id = "profile-row" + i;
    clone.getElementsByTagName('select')[0].id = "select-item" + i;
    clone.getElementsByTagName('input')[0].id = "select-item-value" + i;
    original.parentNode.appendChild(clone);
}

---

Related Topics