To create an element with ID attribute using JavaScript, you can use creatElement() function then set attribute on the element. Let’s learn about the specific steps with me.
Create An Element With ID Attribute Using JavaScript
Create an element with ID attribute using JS. We will go through some of the following steps:
- Create an element using a createElement() method.
- Set attribute on the element.
- Use appendChild() to add elements to your web page.
Step 1: Create an element using a document.createElement() method
Document.createElement() is used to create an HTML element specified by the passed parameter.
Syntax:
createElement(tagName)
Parameter
- tagName: A string is the name of an element you want to create.
Example:
const el = document.createElement("div");The above statement is used to create a specific element. This is a div tag. We can create as many other types of tags as you want by passing in the tagName you want to create. When we pass the tagName parameter without malformed any tag in the HTML, the program will return HTMLUnknownElement.
Step 2: Set attribute into element
We will use the setAttribite() method to set attributes for our page.
Syntax:
element.setAttribute(qualifiedName, value)
Parameters
- qualifiedName: This is a string of the attribute’s name to which the value will be set.
- value: This is a string of the property’s value name.
Example:
el.setAttribute("class", "my_class");The example above is the element I have just created in the previous step. In this step, I set an attribute of a class to my page, and the name of that class will be my_class. Here I have changed some attributes for the element we just created.
Step 3: Use appendChild() to add elements to your web page
After we set the attribute for the page, the next step is to use the appendChild() method to add the element to the page.
Syntax:
appendChild(aChild)
Parameter
- aChild: This node connects to the parent node, which will usually be an element.
Example:
document.body.appendChild(el);We see here that I have passed the parameter to the element we created to be the child node, and the parent node will be the page’s body tag. After completing this step, we have a complete page as follows:
<!DOCTYPE html>
<html lang = "en">
<head >
<title>learnshareit</title>
<style>
.my_class{
font-size: 20px;
background: burlywood;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<script>
const el = document.createElement("div");
el.innerText = "Hello learnshareit";
el.setAttribute("class", "my_class")
document.body.appendChild(el);
</script>
</body>
</html>You can get the above code to load. You can see a new element here is a new div tag with attribute class = ‘my_class’, which is the attribute we created in step 2. Those are the steps to create an element with ID attribute using JS.
Summary
Create an element with ID attribute using JS is not tricky. Through this article, I have shown straightforward steps so that you can learn and practice in the easiest way possible. To use it, you should spend a little more time practising and putting it into your lesson. I hope this article will help you. Good luck.
Maybe you are interested:
- How To Change Background Color On Click In JavaScript?
- Create An Image Element In JavaScript
- How to create a style tag using 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
