HTML - DOM Element normalize() Method

Quiz

The HTML DOM Element normalize() method is used to combine (or join) adjacent text nodes within an HTML element and removes any empty text nodes.

The term adjacent text nodes refers to text nodes that are located next to each other without any intermediate elements.

Syntax

Following is the syntax of the HTML DOM Element normalize() function −

node.normalize();

Parameters

This method does not accept any parameter.

Return Value

This method does not return any value.

Example 1: Combining the Adjacent Text Nodes

The following is the basic example of the HTML DOM Element normalize() function. It combines the adjacent text nodes −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element normalize()</title>
</head>
<body>
<h3>HTML DOM Element normalize() Method</h3>
<p>Combines the adjacent text nodes by removing extra whitespace.</p>
<div id="pt">
   <p>This is <em>some</em> text nodes</p>
   <div>-----spaces----</div>
   <p>Another     text node  with    spaces</p>
   <div>---spaces----</div>
   <p>And <em>more   </em>  text nodes</p>
</div>
<div id="output"></div>
<div style="margin-top: 20px;">
<button onclick="normalizeAndDisplay()">Normalize Content</button>
</div>
<script>
   function normalizeAndDisplay() {
      const pDiv = document.getElementById('pt');
      pDiv.normalize();
      const outputDiv = document.getElementById('output');
      outputDiv.innerHTML = `<p><strong>Normalized HTML:</strong></p>
      ${pDiv.innerHTML}`;
      // Remove spacer elements from output
      const spacerElements = outputDiv.querySelectorAll('div');
      spacerElements.forEach(element => {
          element.remove();
      });
   }
</script>
</body>
</html>

The above program combines the adjacent text nodes within a div element by removing all the extra white spaces.

Example 2: Combining and Normalizing the Elements Dynamically

Following is another example of the HTML DOM Element normalize() method. We use this method to "combine" and "normalize" the content of an HTML element dynamically −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element normalize()</title>
</head>
<body>
<h3>HTML DOM Element normalize() Method</h3>
<p>Add Text Normalize</p>
<p id="paragraph">Click one button to add text to this paragraph, click the 
other button to normalize the paragraph.</p>
<div class="button-container">
<button onclick="addText()">Add Text</button>
<button onclick="normalizeParagraph()">Normalize Paragraph</button>
</div>
<p id="output">The paragraph above has 
<span id="child-count">1</span> child node(s).
</p>
<script>
   function addText() {
      const paragraph = document.getElementById('paragraph');
      const newText = document.createTextNode(' Additional text.');
      paragraph.appendChild(newText);
      updateChildCount();
   }
   function normalizeParagraph() {
      const paragraph = document.getElementById('paragraph');
      paragraph.normalize();
      updateChildCount();
   }
   function updateChildCount() {
      const childCount = 
	  document.getElementById('paragraph').childNodes.length;
      document.getElementById('child-count').textContent = childCount;
   }
</script>
</body>
</html>

After executing the above program, it combines and normalizes the element contents when the button is clicked.

Supported Browsers

Method
normalize()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page