How to set DOM element as first child?

When working with DOM (Document Object Model), there are several ways to set an element as the first child of its parent. I'll illustrate this with JavaScript. Here are two common methods:

Method 1: Using the prepend Method

If you want to set an existing element as the first child of a parent element, you can use the prepend method. This method allows you to add one or more nodes to the beginning of the parent node's child list. If the node to be added already exists in the DOM, it will be moved.

Example code:

javascript
// Assume the following HTML structure:
// <div id="parent"><div id="child2">Second Child</div></div>

// Get the parent element and the element to move
const parent = document.getElementById('parent');
const newFirstChild = document.createElement('div');
newFirstChild.textContent = 'First Child';

// Use the prepend method to add newFirstChild as the first child
parent.prepend(newFirstChild);

// Now the HTML structure becomes:
// <div id="parent"><div>First Child</div><div id="child2">Second Child</div></div>

Method 2: Using the insertBefore Method

Another method is to use the insertBefore method. This method requires two parameters: the new node and the reference node. The new node will be inserted before the reference node.

Example code:

javascript
// Assume the following HTML structure:
// <div id="parent"><div id="child2">Second Child</div></div>

// Get the parent element and the reference child element
const parent = document.getElementById('parent');
const refChild = parent.firstChild;
const newFirstChild = document.createElement('div');
newFirstChild.textContent = 'First Child';

// Use insertBefore to insert newFirstChild before refChild
parent.insertBefore(newFirstChild, refChild);

// Now the HTML structure becomes:
// <div id="parent"><div>First Child</div><div id="child2">Second Child</div></div>

In these two methods, prepend is more intuitive and modern, especially when adding multiple child nodes. However, insertBefore provides more control because you can specify the exact reference node. These techniques are commonly used in front-end development, particularly when dynamically modifying DOM structures. Such operations can be used to implement various user interface effects, such as dynamically adding hints or updating the order of lists.