DOM manipulations in JavaScript

Interactive DOM manipulation

Experiment with DOM manipulation and see the code behind it.

1. Dynamic Text Update (`textContent`)

Output: Nothing yet

Code concept: let value = document.getElementById('userInput').value;
This retrieves the text typed by the user. We then update the output with: document.getElementById('output').textContent = value;

2. Style Manipulation

Code concept: element.style.color = 'red';
This directly modifies the CSS of an element. We toggle between red and blue dynamically.

3. Creating Elements (`appendChild`)

Container for new elements:

Code concept: let div = document.createElement('div'); creates a new div.
container.appendChild(div); adds it to the DOM.

4. Removing Elements (`removeChild`)

Code concept: container.removeChild(container.lastElementChild); removes the last element inside a container.

5. Class Manipulation (`classList.toggle`)

Code concept: element.classList.toggle('highlight');
This adds the class if it’s missing or removes it if it’s present, dynamically changing styles.

6. innerHTML Example

Original content here.

Code concept: element.innerHTML = '<strong>HTML</strong> content';
This allows inserting HTML directly into an element.

Try this Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive DOM Playground</title>
  <style>
    body { font-family: Arial; padding: 20px; line-height: 1.6; background: #f0f0f0; }
    h2 { color: #333; }
    .box { margin-top: 10px; padding: 10px; border: 1px solid gray; background-color: #fff; }
    .highlight { background-color: yellow; }
    .example { font-style: italic; color: #555; margin-top: 5px; }
    button { margin-right: 5px; margin-top: 5px; padding: 5px 10px; cursor: pointer; }
    input { padding: 5px; margin-top: 5px; }
    .section { margin-bottom: 20px; }
    .demo-element { padding: 5px; margin-top: 3px; border: 1px dashed gray; background: #fafafa; }
  </style>
</head>
<body>

  <h2>Interactive DOM Playground</h2>
  <p>Experiment with different DOM manipulations in real-time!</p>

  <!-- Section 1: textContent -->
  <div class="section">
    <h3>1. Dynamic Text Update (textContent)</h3>
    <input type="text" id="userInput" placeholder="Type something..." oninput="updateOutput()">
    <div class="box">
      Output: <span id="output">Nothing yet</span>
      <div class="example">Typing updates this text instantly using <strong>textContent</strong>.</div>
    </div>
  </div>

  <!-- Section 2: Style manipulation -->
  <div class="section">
    <h3>2. Style Manipulation</h3>
    <button onclick="changeColor()">Change Output Color</button>
    <div class="example">Click to toggle output color between red and blue using <strong>style.color</strong>.</div>
  </div>

  <!-- Section 3: Create new elements -->
  <div class="section">
    <h3>3. Creating Elements (appendChild)</h3>
    <button onclick="addNewElement()">Add New Element</button>
    <div id="container" class="box">
      Container for new elements:
      <div class="example">New divs created appear here using <strong>appendChild</strong>.</div>
    </div>
  </div>

  <!-- Section 4: Remove elements -->
  <div class="section">
    <h3>4. Removing Elements (removeChild)</h3>
    <button onclick="removeLastElement()">Remove Last Element</button>
    <div class="example">Removes the last element inside the container using <strong>removeChild</strong>.</div>
  </div>

  <!-- Section 5: Class toggling -->
  <div class="section">
    <h3>5. Class Manipulation (classList.toggle)</h3>
    <button onclick="toggleHighlight()">Toggle Highlight</button>
    <div class="example">Adds or removes the <strong>highlight</strong> class dynamically.</div>
  </div>

  <!-- Section 6: innerHTML example -->
  <div class="section">
    <h3>6. innerHTML Example</h3>
    <button onclick="updateInnerHTML()">Update innerHTML</button>
    <div id="innerHTMLBox" class="box demo-element">Original content here.</div>
    <div class="example">Using <strong>innerHTML</strong> allows inserting HTML elements directly.</div>
  </div>

  <!-- JavaScript -->
  <script>
    // 1. Dynamic text update
    function updateOutput() {
      const value = document.getElementById("userInput").value;
      document.getElementById("output").textContent = value;
    }

    // 2. Change text color
    function changeColor() {
      const output = document.getElementById("output");
      output.style.color = output.style.color === "red" ? "blue" : "red";
    }

    // 3. Add new element
    function addNewElement() {
      const div = document.createElement("div");
      div.textContent = "I am a new element!";
      div.className = "demo-element";
      document.getElementById("container").appendChild(div);
    }

    // 4. Remove last element
    function removeLastElement() {
      const container = document.getElementById("container");
      if(container.lastElementChild && !container.lastElementChild.classList.contains("example")) {
        container.removeChild(container.lastElementChild);
      } else {
        alert("No more elements to remove!");
      }
    }

    // 5. Toggle highlight
    function toggleHighlight() {
      const container = document.getElementById("container");
      container.classList.toggle("highlight");
    }

    // 6. Update innerHTML
    function updateInnerHTML() {
      const box = document.getElementById("innerHTMLBox");
      box.innerHTML = "<strong>Updated Content!</strong> This <em>HTML</em> was added via innerHTML.";
    }
  </script>

</body>
</html>

Search This Blog