Open In App

How to assign an id to a child tag of the cloned html ?

Improve
Improve
Like Article
Like
Save
Share
Report

Here we use in basic HTML, CSS, JavaScript, jQuery and Bootstrap to build this small example project. jQuery is the open-source library which simplifies create and navigation of web application. We are going to use three jQuery methods such as clone(), append() and attr() method for solving this example.

clone() method make a copy of select element 

attr() method for change the name of attribute like id, class etc

append() method is for append the last child of each element in the jQuery collection

Here we are going to clone the bootstrap card which has an id named as ‘cloneme’ and having child tags such as ‘<b>’, ‘<button>’,'<p>’ tag.

Steps:-

  1. When the user presses the ‘click me’ button in the UI section of the web page, then it’s going to run on click listener callback.
  2. Inside this callback function, we simply make a copy of HTML tag with id ‘cloneme’. You can also take HTML tag with attribute class.
  3. After cloning the Html code, we are going to change the ID of child tag of <b> and <button> tag by finding the tag using its attribute name such as id, class.
  4. After finding the tag using its attribute name, then we are going change its attribute name by jQuery attr() method.
  5. Attach the clone HTML code to the destination.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet" 
          integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 
          crossorigin="anonymous">
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width">
    <title>geeksforgeeks</title>
</head>
  
<body>
    <h1 style="margin-top:10px;color:green;text-align:center;">
       GeeksForGeeks
      </h1>
    <button type="button" 
            class="btn btn-success"
            id="clickme"
            style="display: block;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;">Click Me</button>
    <hr style="color:green; border: 2px solid">
    <div id="cloneme" 
         style="margin-left:10px;display:none; 
                margin-top:10px;">
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" 
                 src=
                 alt="GeeksForGeeks">
            <div class="card-body">
                <p class="card-text" style="text-align:center;">
                    <b id="setID">My Id is 0</b></p>
  
  
                <p>
                    GeeksforGeeks.org was created with a goal
                     in mind to provide well written, well
                      thought and well explained solutions
                       for selected questions. The core team 
                       of five super geeks constituting of
                        technology lovers and computer science 
                        enthusiasts have been
                    constantly working in this direction.
                </p>
  
                <button type="button" 
                        id="cancel" 
                        class="btn btn-success"
                         style="justify-content:center;margin-left:auto;
                         margin-right:auto;">
                            Cancel
                </button>
            </div>
        </div>
    </div>
    <div id="bucket" class="container-fluid">
        <div>
            <script src="script.js"></script>
            <script src=
           </script>
            <script>
                let c = 0
  
                function IDgenerate() {
                    return c++
                }
                $("#clickme").on("click", function() {
                    var cn = IDgenerate();
                    //clone the html code
                    let clone = $("#cloneme").clone()
                        //change the css of parent
                    clone.css("display", "inline-block")
                        //change the id attribute of child tag '<b>'
                    clone.find('#setID').attr("id", cn)
                        //change the text inside the child tag '<b>'
                    clone.find("#" + cn).text("My ID is " + cn)
                        //change the id attribute of child tag '<button>'
                    clone.find("#cancel").attr("id", "cancel" + cn)
                        //add on click listener to the cancel button 
                    clone.find("#cancel" + cn).on("click", function() {
                            clone.css("display", "none")
                        })
                        // append the clone to the destination
                    $("#bucket").append(clone)
                })
            </script>
</body>
  
</html>



Working model of the project



Last Updated : 14 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads