To clone an element and change its ID using JavaScript, we will use some built-in methods to interact with HTML elements in Javascript. Let me clarify it with some examples below.
Clone an element and change its ID using JavaScript
To clone an element and change its ID using JavaScript, we have to call out the element we want to clone with the getElementsById() method before we do that. I will introduce something about it.
Syntax:
document.getElementById(elementID)Parameter:
- elementID: This is the ID of the element you want to retrieve.
Example:
document.getElementById("demo");Use the id property to change the id
Above, we have just called the element we want to clone, but we haven’t done it yet. To clone an element, I will use the cloneNode() method.
Syntax:
cloneNode(deep)Parameter:
deep:
- If true, the clone will get a new element similar to the cloned element, including content and all child nodes.
- If false, then after the clone, we will get a new element similar to the cloned element but excluding child nodes. For more understanding, refer to MDN docs.
Example:
var elClone = demo.cloneNode(false);After the element is cloned, we will implement the id property to change the id as follows:
index.html
<!DOCTYPE html>
<html>
<body>
<h1>Clone an Element and change its ID using JavaScript</h1>
<div id="demo">Hello LearnShareIT</div>
<script src="main.js"></script>
</body>
</html>main.js
//Call the element to be cloned
var demo = document.getElementById("demo");
//Clone element demo
var elClone = demo.cloneNode(false);
//set id elClone
elClone.id = "el-clone";
//add elements to the demo
demo.appendChild(elClone);Before executing the command:
<div id="demo">Hello LearnShareIT</div>After executing the command:
<div id="demo">Hello LearnShareIT
<div id="el-clone"></div>
</div>In the example above, the div tag with the id ‘el-clone’ is the tag we just cloned from the div tag with the id ‘demo’ added to the tag. It was cloned as a div tag with the id ‘demo’.
Use the setAttribute method to change the id
Similar to when we use the id property to change another id, the difference is that we will use the setAttribute method to change the id of the element we have just created.
Syntax:
setAttribute(name, value)Parameters:
- name: The name of the type of attribute you want to set.
- value: A string containing the value name of the property type you want to set.
We will also clone the element, like when we use the id property to change the id. After doing this, we will change its id with the setAttribute method and add the cloned element. My program code is as follows:
index.html
<!DOCTYPE html>
<html>
<body>
<h1>Clone an Element and change its ID using JavaScript</h1>
<div id="demo">Hello LearnShareIT</div>
<script src="main.js"></script>
</body>
</html>main.js
//Call the element to be cloned
var demo = document.getElementById("demo");
//Clone element demo
var elClone = demo.cloneNode(false);
//set id elClone
elClone.setAttribute('id', 'el-clone');
//add elements to the demo
demo.appendChild(elClone);Before executing the command:
<div id="demo">Hello LearnShareIT</div>After executing the command:
<div id="demo">Hello LearnShareIT
<div id="el-clone"></div>
</div>Summary
Above are the two ways for you to clone an element and change its ID using JavaScript. You should try to follow and test them. Then you will understand and not be confused about how to clone an element and change its ID anymore. I hope this article helps you and your program. Good luck.
Maybe you are interested:
- Clear the Value of a Textarea using JavaScript
- Add attribute to multiple Elements in JavaScript
- Create an Element with Style attribute in JavaScript
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css