The prepend of ParentNode for JS inserts nodes before the first child of the node, while replacing the strings in the nodes with equivalent text nodes.
Objects that implement Node. Nodes participate in a tree, which is known as the node tree.
<!doctype html>
<html>
<body>
<button>button</button>
<div>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<script>
function myfunction()
{
document.querySelector("div").prepend("prepend");
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<button>button</button>
<div>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<script>
function myfunction()
{
const myelement = document.createElement("p");
myelement.prepend("prepend");
document.querySelector("div").prepend(myelement);
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<button>button</button>
<div>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<script>
function myfunction()
{
const mytextnode1 = document.createTextNode("prepend1");
const mytextnode2 = document.createTextNode("prepend2");
const mytextnode3 = document.createTextNode("prepend3");
document.querySelector("div").prepend(mytextnode1, mytextnode2, mytextnode3);
}
document.querySelector("button").addEventListener("mouseover", myfunction);
</script>
</body>
</html>