Adding HTML Elements with JavaScript

JavaScript provides powerful ways to dynamically add new HTML elements to your web page. This capability is essential for creating interactive and dynamic user interfaces.

1. Creating New Elements

To add a new HTML element to your page, you first need to create the element using the document.createElement() method. Specify the tag name of the element you want to create.

    // Create a new paragraph element
    const newParagraph = document.createElement("p");
    newParagraph.textContent = "This is a new paragraph created with JavaScript.";
    
    // Append the new paragraph to the body
    document.body.appendChild(newParagraph);
  

2. Appending Elements (Inserting the New element)

Once you’ve created the new element, you can add it to your page by appending it to an existing element. Use the appendChild() method to add the new element as a child of the target element.

  <div id="targetDiv">
    <p>This is an existing paragraph.<p>
  <div>

    // Create a new heading element
    const newHeading = document.createElement("h2");
    newHeading.textContent = "New Heading Added Dynamically";
    
    // Append the new heading to the target div
    const targetDiv = document.getElementById("targetDiv");
    targetDiv.appendChild(newHeading);
  

3. Inserting Before

You can also insert a new element before an existing element using the insertBefore() method. This method takes two arguments: the new element to insert and the existing element before which the new element will be inserted.

  <div id="targetDiv">
    <p>This is an existing paragraph.<p>
  <div>

    // Create a new span element
    const newSpan = document.createElement("span");
    newSpan.textContent = "New Span";
    
    // Insert the new span before the existing paragraph
    const insertTarget = document.getElementById("insertTarget");
    insertTarget.insertBefore(newSpan, insertTarget.firstChild);
  

4. Removing Existing HTML Elements

To remove an HTML element, you must know the parent of the element. Then you can use this syntax to remove the element you want: parentElement.removeChild(childElement)

     <div class="container">
        <h1>document.querySelector<h1>
        <<p id="paragraph1">my paragraph 1<p>
        <p id="paragraph2">my paragraph 2<p>
        <div class="box1">my first box<div>
        <div class="box2">my second box<div>
        <a href="https://globaltechmastery.com/">Global Tech Mastery<a>
    <div>

       //Removing existing Html Element
        let element3 = document.querySelector(".container");
        let paragraph1_child = document.querySelector("#paragraph1");
        element3.removeChild(paragraph1_child);
  

5. Replacing Existing HTML Elements

To replace an element, use the replaceChild() method. Then you can use the syntax below to replace the element you want (oldElement):parentElement.replaceChild(newElement, oldElement)

      <div class="container">
        <h1>document.querySelector<h1>
        <<p id="paragraph1">my paragraph 1<p>
        <p id="paragraph2">my paragraph 2<p>
        <div class="box1">my first box<div>
        <div class="box2">my second box<div>
        <a href="https://globaltechmastery.com/">Global Tech Mastery<a>
    <div>
        let paragraph = document.createElement("p");
        let node = document.createTextNode("New paragraph used to replace a tag");
        paragraph.appendChild(node);
        let parentElement = document.querySelector(".container");
        let anchorTag = document.querySelector("div a");    //element to remove
        parentElement.replaceChild(paragraph,anchorTag);
  

Image example – pls read carefully to understand the output