Node Manipulation Methods

appendChild()

Adds a new child node to the end of an element's child nodes list.

parentElement.appendChild(newChild);

insertBefore()

Inserts a new child node before a specified existing child node.

parentElement.insertBefore(newNode, referenceNode);

removeChild()

Removes a specified child node from the DOM and returns the removed node as a Node object. Returns null if the node does not exist.

var removedNode = parentElement.removeChild(childNode);

innerHTML

Property that sets or returns the HTML content between the opening and closing tags of an element.

element.innerHTML = '<div>New content</div>';

Demo: Element Addition and Removal

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .box-a { background-color: lightblue; width: 200px; height: 100px; float: left; }
      .box-b { background-color: lightgreen; width: 200px; height: 100px; float: left; }
      .box-c { background-color: lightcoral; width: 200px; height: 100px; float: left; }
      .inner-box { background-color: mintcream; margin: 5px; }
    </style>
  </head>
  <body>
    <div id="area1" class="box-a">
      <div id="anchor">Anchor Point</div>
    </div>
    <div id="area2" class="box-b"></div>
    <div id="area3" class="box-c">
      <span id="target">Removable Content</span>
    </div>
    <div style="clear: both;"></div>
    <br>
    <button onclick="runDemo()">Run Demo</button>

    <script>
      function runDemo() {
        // Using appendChild
        var wrapper1 = document.getElementById('area1');
        var newDiv = document.createElement('div');
        newDiv.className = 'inner-box';
        newDiv.textContent = 'Added via appendChild';
        wrapper1.appendChild(newDiv);

        // Using insertBefore
        var insertionPoint = document.getElementById('anchor');
        var insertedDiv = document.createElement('div');
        insertedDiv.className = 'inner-box';
        insertedDiv.textContent = 'Added via insertBefore';
        wrapper1.insertBefore(insertedDiv, insertionPoint);

        // Using innerHTML
        var wrapper2 = document.getElementById('area2');
        wrapper2.innerHTML = '<div class="inner-box">Added via innerHTML</div>';

        // Using removeChild
        var wrapper3 = document.getElementById('area3');
        var itemToRemove = document.getElementById('target');
        wrapper3.removeChild(itemToRemove);
      }
    </script>
  </body>
</html>

Attribute Manipulation Methods

setAttribute()

Sets an attribute with the specified name and value. Setting a attribute to undefined effectively removes it.

element.setAttribute('attributeName', 'value');

removeAttribute()

Removes the specified attribute from the element.

element.removeAttribute('attributeName');

getAttributeNode()

Returns the specified attribute as an Attr object.

var attrNode = element.getAttributeNode('attributeName');

removeAttributeNode()

Removes the specified attribute node and returns the removed Attr object.

var removedAttr = element.removeAttributeNode(attributeNode);

Demo: Attribute Operations

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      p { padding: 10px; margin: 5px 0; border: 1px solid #ccc; }
    </style>
  </head>
  <body>
    <p id="para1">Paragraph 1: Using setAttribute with style</p>
    <p id="para2">Paragraph 2: Setting undefined removes attribute</p>
    <p id="para3">Paragraph 3: Testing removeAttribute</p>
    <p id="para4">Paragraph 4: Using getAttributeNode</p>
    <p id="para5">Paragraph 5: Testing removeAttributeNode</p>

    <script>
      function testAttributes() {
        // setAttribute works well with inline styles
        var p1 = document.getElementById('para1');
        p1.setAttribute('style', 'color: blue; font-weight: bold;');

        // Setting attribute to undefined removes it
        var p2 = document.getElementById('para2');
        p2.setAttribute('data-info', 'test');
        p2.setAttribute('data-info', undefined);

        // removeAttribute for standard attributes
        var p3 = document.getElementById('para3');
        p3.removeAttribute('id');

        // getAttributeNode and removeAttributeNode
        var p4 = document.getElementById('para4');
        var attrNode = p4.getAttributeNode('id');
        if (attrNode) {
          p4.textContent += ' - Found attribute: ' + attrNode.name + '=' + attrNode.value;
        }

        // Demonstrate removeAttributeNode return value
        var p5 = document.getElementById('para5');
        var styleAttr = p5.getAttributeNode('style');
        var deletedAttr = p5.removeAttributeNode(styleAttr);
        p5.textContent = 'Removed: ' + deletedAttr.name + ' (value: ' + deletedAttr.value + ')';
      }

      testAttributes();
    </script>
  </body>
</html>

Important Notes

CSS-related properties like font-size and font-style cannot be set individually as separate attributes. They must be applied through the style attribute as a complete CSS declaration.

// Incorrect - has no effect
element.setAttribute('font-size', '16px');

// Correct approach
element.setAttribute('style', 'font-size: 16px;');