Search⌘ K
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Removing and Replacing Elements

Explore how to manipulate the DOM by removing and replacing elements using JavaScript methods such as replaceChild and cloneNode. Understand handling nodes correctly to create interactive and responsive web features like a to-do list.

We'll cover the following...

Earlier you learned that Firefox does not support the insertAdjacent...() operations, which are not the part of the DOM API standard, although all other major browsers support it.

To wrap all links with square brackets, you can find a general solution instead of the one demonstrated in Listing: Using insertAdjacentText(), which uses the script in the Listing below.

Listing: Browser independent way of fixing issues with the previous Listing

HTML
<!-- Other markup elements are omitted -->
<script>
  function decorateLinks() {
    for (var i = 0; i < document.links.length; i++) {
      var link = document.links[i];
      var span = document.createElement('span');
      span.appendChild(document.createTextNode('['));
      span.appendChild(link.cloneNode(true));
      span.appendChild(document.createTextNode(']'));
      link.parentNode.replaceChild(span, link);
    }
  }
</script>

This code simply replaces the links with a <span> that contains three children, the text for “[”, the original link element, and the text for “]”. The code snippet uses the ...