Create New Nodes Using DOM – JavaScript Tutorial


In this article, we will take a brief look at DOM new Nodes creation. Well, in this article, we are discussing new nodes creation and specify some style to that nodes. Using the Document object model you can create a new node and also specify some demo as well. In the previous lecture, we had learned what is try and catch method. If you wanted to learn that article then must read this, first and move forward.

New Nodes

Till now you had learned how to access notes using document object. Now you will learn the advantage of using Dom in the JavaScript is you can make your own nodes explicitly. To create your new Dom element you have createElement() method. Using this method you can create your new node explicitly. This method only create a new node but it doesn’t add it to the Dom. You will have to do that in a separate step.

Now let’s understand how to create a new node with JavaScript.

For example. So here we will create two paragraph with some demo text and then append this paragraph in the division tag.

So in the dom.html file, we will first create a division tag.

So in the main.js file, I will create two paragraph.

In the above example, we had created two paragraph using createElement() method. To access this method we are using document object. These two statements create two paragraph. After that, we will add some content to these two paragraphs. So using textContent property we will specify some demo text to the paragraph.

So when you execute this will not do anything because we haven’t added the paragraph to the dom. so to do that we have appendChild method to insert an element in the Dom. Appendchild method used to insert a node to the end of the list Of children of a specified parent node.

Whenever you wanted to insert to DOM you have to specify parent node first and using that parent node you can append your child node.

Suppose, if you wanted to insert the second paragraph in the body then you have to write this code.

You are not limited to create the only paragraph in the Dom. You can create any HTML element using create element method. So it means dom gives us full control of HTML elements.

setAttribute()

What if you wanted to specify the attribute to your HTML element. In that situation, you have a set attribute method. Using this method you can set the value to the specified element. If the attribute already exists then the only value is updated otherwise new attribute is added with the specified name and value.

If you can add the attribute to the element then you can remove attribute as well. To remove attribute we have a remove attribute method. You can remove attribute value using the attribute name.

Like this,

Right. Basically, there are lots of method in JavaScript that you can use in proper Circumstances.

Styling Node

As you know style property allows you to style your element, therefore, we will directly jump to the example to understand how this property work.

Insert the submit button in the DOM.html file.

In main.js file style this element.

Now let’s see how to style you submit button using JavaScript. now when you specifying a new property to the element then you need to care about one thing. whenever you specify property you need to specify exact property name. Because style properties are case sensitive.

Whenever you specify any styling property you need to keep in mind that every property starts with the small letter and when combining two words like background color then the second word should start with the capital letter. 

So if you specify a small see here then this will not specify the background color to the submit button.

So the JavaScript will not recognize this property and therefore you will get your default background color to the element.

Now let’s take a look at you styling property of JavaScript.

In JavaScript, we have more than 50 properties to change element styling. Anyway, now you know that how to style node using HTML. You can also use CSS to style your nodes. That’s it.

I hope you understand this article. If you have any question then you can ask me in the comment section.