JavaScript prepend() method

The javascript prepend() method adds a set of array node objects or DOMString objects before the first child of an html parent node. There are two ways to use the javascript prepend method with the parent node.

1. Using the prepend() method to prepend node
2. Using the prepend() method to prepend text

Using the prepend() method to prepend the node

The array node uses the prepend() method to get the object of the first child. It is a simple method to get the parent's prepend node of the array values.

Syntax

The following syntax uses to prepend the array node in the parent node.

How does it work?

• First, create the html page with the list tag. Select the list element using id or class.
• The particular list tag selects using the query selector in the script tag.
• Second, declare the array of data to insert into the list.
• The "for each" loop uses for the element in an array. Create a new li tag with the element.
• The textContent assigns to the array element and returns the array data.
• Finally, prepend the list <li> elements to the <ul> parent element by using the javascript prepend() method.

Examples

The following examples use to prepend the array node or list data in the parent tag.

example1: the following example shows the basic operation of the prepend() method. The list value shows in the ul tag using the array node. Here, we do not add a list value in the ul tag.

Output

The prepend() method's data show as an output.

Example 2: the following example shows the basic operation of the prepend() method. The list value shows in the ul tag using the array node. Here we use the default value in the <ul> tag

Output

The prepend() method's data show as an output.

Example 3: the following example shows the basic operation of the prepend() method. The ordered list value shows in the ol tag using the array node. Here we use the default value in the <ol> tag

Output

The prepend() method's data show as an output.

Example 4: the following example shows the basic operation of the prepend() method. The ordered list value shows in the ol tag using the array node. Here we use the default value in the <ol> tag

Output

The prepend() method's data show as an output.

Using the prepend() method to prepend text

Javascript string information is prepended into the query selector of the html tag. We can use it to insert value before the original value.

Syntax

The following syntax uses to prepend a dom string or element in the parent node.

How does it work?

• First, create the html page with the basic tag and query selector.
• Select the html tag using the query selector in the script tag.
• Finally, prepend the docstring element or text using the javascript prepend() method.

Examples

The following examples use to insert text values or strings in the tab.

Example 1: the following example prepends simple text in the query selector container. The docstring value is placed in the <div> tag.

Output

The prepend() method's data show as an output.

Example 2: the following example prepends text before the original value using the query selector container. The string value is placed in the <div> tag.

Output

The prepend() method's data show as an output.

Conclusion

The javascript prepend is the method to insert in the parent node using a query selector. The child node or multiple data prepends in the parent tag.