Create element with text javascript

In this tutorial, we will get to know about various methods to create an element from strings in JavaScript. Creating elements from a string can be very useful in case we have to generate elements dynamically which makes the website interactive. An example will be like in a to-do list app we add, delete, and edit to-do items.

Table of Contents Show

The createElement() Method
How to create element with string in JavaScript?
How do I create a text element?
How to create new element in JavaScript?
How to add text to a div in JavaScript?

The createElement() Method

We create JavaScript items using the createElement() method. To create a particular element, we pass the item name as a string into the createElement() method.

The createElement(tagName) function has a parameter as the name of the tag which will be created using this method. Here tagName is the parameter name and it will be in form of a string. Note that only one element will be created from one string.

Syntax

document.createElement("tagName")

In the place of tagName we pass the tag name like p (paragraph), h1(heading 1), img (image). The createElement will make the tagName lowercase so you don’t have to worry about the case.

Steps

STEP 1 − Create strings with element values such as h3 and p, etc
STEP 2 − Pass the string to the createElement() method as parameters. Assign the value to a variable. This will create our required element.
STEP 3 − After creating the element, we assign the desired text to both elements using the innerText property.
STEP 4 − After all, append we use the append() or appendChild() method to append of the created element/s to the webpage so that it will be visible to the user.

Let’s create a heading and a paragraph from the strings.

let string1="h3"
let string2="p"
let element1=document.createElement(string1)
let element2=document.createElement(string2)

So, you got to know about how we create elements but creating an element will not help to show the element to the user as it’s not a part of DOM instead we have to make it part of DOM by appending them to the webpage.

So, we use some methods like append(),and appendChild().

Example

Append created elements using append() method.

In the below example we created two elements h3 and p using the document createElement() method. Then assigned some texts to these elements and appended the elements to DOM using the append() method. Finally, displayed the elements using the innerHTML property.

Creating elements from string in JavaScriptnhi

Example

Append created elements using the appendChild() method.

In the below example, we created two elements h3 and p using the document createElement() method. Then assigned some texts to these elements and appended the elements to DOM using the appendChild() method. Finally, displayed the elements using the innerHTML property

Creating elements from string in JavaScript

Now you might be thinking that the above program’s output is the same then what makes both programs different?

Well, yes both are used to append the node to the HTML document but in case append() method it returns the appended node but the appendChildI() method returns nothing.

Using append() method we can append multiple elements at once but in the case appendChild() method we can only append a single element at once.

document.body.append(element1, element2)

This will do the same work as

document.body.append(element1)
document.body.append(element2)

Using append() method DOMString and DOMNodes both can be appended to the parent element but in the case appendChild() method only DOMNodes can be appended to the parent element.

The Document object provides a method createElement() to create an element and appendChild() method to add it to the HTML DOM. Following are the steps involved in creating HTML DOM −

Step 1 − To insert an element into HTML DOM, firstly, we need to create an element and append to HTML DOM. The document.createElement() is used to create the HTML element. The syntax to create an element is shown below.

document.createElement(tagName[, options]);

Where,

tagName is the name of the tag to be created. The tag is of
type.
options param is an optional element object.

Step 2 − After creation of a tag, we need to create a text to assign to the tag. The syntax to create a text node is shown below.

Document.createTextNode(“String”);

Step 3 − After creating the text, we need to add the text to the element

type and thus finally adding to the div tag. The syntax to append the element to a tag is shown below.

appendChild(parameter);

Example 1

In the following example, initially the div section consists of only 2 texts. But later on, one more text is created and added to the div section as shown in the output.

Tutorix

Tutorialspoint

On executing the above code, the following output is generated.

Example 2

The following is an example program on how to add an element to HTML DOM. Here, the insertBefore method is used instead of append method to add the element to the div tag.

How to create element with string in JavaScript?

We create JavaScript items using the createElement() method. To create a particular element, we pass the item name as a string into the createElement() method. The createElement(tagName) function has a parameter as the name of the tag which will be created using this method.

How do I create a text element?

Create a text node and append it to the document:.

let textNode = document. createTextNode("Hello World"); document. body. appendChild(textNode);.

const h1 = document. createElement("h1"); const textNode = document. createTextNode("Hello World"); ... .

const para = document. createElement("p"); const textNode = document..

How to create new element in JavaScript?

This code creates a new <p> element:.

const para = document.createElement("p");.

const node = document.createTextNode("This is a new paragraph.");.

para.appendChild(node);.

const element = document. getElementById("div1");.

element. ... .

const elmnt = document.getElementById("p1");.

elmnt.remove();.

const parent = document..

How to add text to a div in JavaScript?

Add text to DIV using appendChild() Method in JavaScript (Method 2) You can also use the appendChild() method in JavaScript to add text or contents to a <div>.