Section 1.1: Using document.createElement and appendChild

One effective method for adding child elements without employing innerHTML involves using the document.createElement function. This allows for the creation of new elements, which can then be attached to the container through the appendChild method.

For instance, consider this HTML structure:

<div id="container"></div>

The corresponding JavaScript code would look like this:

const element = document.querySelector('div#container');

const newElement = document.createElement('div');

const content = 'hello world';

newElement.innerHTML = content;

while (newElement.firstChild) {

element.appendChild(newElement.firstChild);

}

In this example, we select the container div using querySelector. We then create a new div and set its innerHTML to the desired content. Finally, we use appendChild to insert this new div into the parent container, resulting in 'hello world' being displayed on the webpage.

Section 1.2: Utilizing insertAdjacentHTML

Another efficient approach to add a child element is through the insertAdjacentHTML method. This method allows for quick insertion of HTML into a specified position within the container.

Given the same HTML structure:

<div id="container"></div>

You can achieve the same result using the following JavaScript code:

const element = document.querySelector('div#container');

element.insertAdjacentHTML('beforeend', 'hello world');

In this case, we again select the container div. By calling insertAdjacentHTML with the 'beforeend' position and the HTML string, we effectively append 'hello world' to the container.