The JavaScript prepend function is utilized to insert a collection of array node objects or DOMString objects prior to the initial child of an HTML parent node. There are two approaches to employ the JavaScript prepend method in relation to the parent node.
- Utilizing the prepend method to insert a node
- Employing the prepend method to insert text
Using the prepend method to prepend the node
The array node employs the prepend function to retrieve the object representing the initial child. This method offers a straightforward approach to access the parent's prepend node corresponding to the values within the array.
Syntax
The syntax provided is utilized to add the array node at the beginning of the parent node.
parentNode.prepend(...array_nodes);
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 subsequent examples demonstrate how to add elements to the beginning of the array node or list data within the parent element.
example1: the subsequent example illustrates the fundamental functionality of the prepend method. The array node displays the list value within the ul tag. In this case, we do not include a list value inside the ul tag.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript prepend() method </title>
</head>
<body>
<h3> JavaScript prepend() method </h3>
<p> Using the prepend() method to prepend node </p>
<ul id = "language_value"></ul>
<script>
let languages_array = ['TypeScript', 'NodeJs', 'JavaScript', 'Jquery', 'AngularJs'];
let lang_data = document.querySelector('#language_value')
let lang_nodes = languages_array.map(lang => {
let li_var = document.createElement('li');
li_var.textContent = lang;
return li_var;
});
lang_data.prepend(...lang_nodes);
</script>
</body>
</html>
Output
The prepend method's data show as an output.
Example 2: The subsequent example illustrates the fundamental functionality of the prepend method. The list value is displayed within the ul tag utilizing the array node. In this instance, we employ the default value contained in the <ul> tag.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript prepend() method </title>
</head>
<body>
<h3> JavaScript prepend() method </h3>
<p> Using the prepend() method to prepend node </p>
<ul id = "language_value">
<li> Java </li>
<li> PHP </li>
</ul>
<script>
let languages_array = ['TypeScript', 'NodeJs', 'JavaScript', 'Jquery', 'AngularJs'];
let lang_data = document.querySelector('#language_value')
let lang_nodes = languages_array.map(lang => {
let li_var = document.createElement('li');
li_var.textContent = lang;
return li_var;
});
lang_data.prepend(...lang_nodes);
</script>
</body>
</html>
Output
The prepend method's data show as an output.
Example 3: The subsequent illustration demonstrates the fundamental functionality of the prepend method. The ordered list is represented within the ol tag utilizing the array node. In this instance, we employ the default value located in the <ol> tag.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript prepend() method </title>
</head>
<body>
<h3> JavaScript prepend() method </h3>
<p> Using the prepend() method to prepend node </p>
<ol id = "language_value">
<li> Java </li>
</ol>
<script>
let languages_array = ['PHP', 'ASP.NET', 'JavaScript', 'Jquery', 'AngularJs'];
let lang_data = document.querySelector('#language_value')
let lang_nodes = languages_array.map(lang => {
let li_var = document.createElement('li');
li_var.textContent = lang;
return li_var;
});
lang_data.prepend(...lang_nodes);
</script>
</body>
</html>
Output
The prepend method's data show as an output.
Example 4: The subsequent illustration demonstrates the fundamental functionality of the prepend method. The ordered list value is displayed within the ol tag utilizing the array node. In this instance, we employ the default value located in the <ol> tag.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript prepend() method </title>
</head>
<body>
<h3> JavaScript prepend() method </h3>
<p> Using the prepend() method to prepend node using click event </p>
<ol id = "language_value">
<li> PHP </li>
</ol>
<button type = "button"
onclick = "value_data();"> click </button>
<script>
function value_data(){
let languages_array = ['PHP', 'ASP.NET', 'JavaScript', 'Jquery', 'AngularJs'];
let lang_data = document.querySelector('#language_value')
let lang_nodes = languages_array.map(lang => {
let li_var = document.createElement('li');
li_var.textContent = lang;
return li_var;
});
lang_data.prepend(...lang_nodes);
console.log(lang_data.textContent);
}
</script>
</body>
</html>
Output
The prepend method's data show as an output.
Using the prepend method to prepend text
Information regarding JavaScript strings can be added at the beginning of the query selector for an HTML element. This functionality allows us to prepend a value prior to the existing content.
Syntax
The syntax provided is utilized to add a DOM string or element at the beginning of the parent node.
parentNode.prepend(...DOMStrings_elemen);
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 subsequent illustrations demonstrate how to incorporate text values or strings into the tab.
Example 1: In this instance, we demonstrate how to add basic text at the beginning of the query selector container. The value of the docstring is stored within the <div> tag.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript prepend() method </title>
</head>
<body>
<h3> JavaScript prepend() method </h3>
<p> Using the prepend() method to prepend DomString text </p>
<div id = "language_value">
<button type = "button"
onclick = "value_data();"> click </button>
</div>
<script>
function value_data(){
let lang_data = document.querySelector('#language_value');
lang_data.prepend('here, text prepends in the tag.');
console.log(lang_data.textContent);
}
</script>
</body>
</html>
Output
The prepend method's data show as an output.
Example 2: In this instance, the example demonstrates how to add text before the existing value by utilizing the query selector container. The string value is situated within the <div> tag.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript prepend() method </title>
</head>
<body>
<h3> JavaScript prepend() method </h3>
<p> Using the prepend() method to prepend DomString text </p>
<div id = "language_value">
<br> The value is placed above the line after clicking the button.
</div>
<button type = "button"
onclick = "value_data();"> click </button>
<script>
function value_data(){
let lang_data = document.querySelector('#language_value');
lang_data.prepend('here, text prepends in the tag.');
console.log(lang_data.textContent);
}
</script>
</body>
</html>
Output
The prepend method's data show as an output.
Conclusion
The JavaScript prepend method allows for the insertion of content at the beginning of a specified parent node through the use of a query selector. This method can add a single child node or multiple pieces of data at the start of the parent element.