Javascript DOM HTML Node normalize Method

Introduction

Normalize an element: 

document.getElementById("demo").normalize();

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#cc {/*from   w w w .  jav  a 2  s  .com*/
  font-size: 20px;
  color: red;
}
</style>
</head>
<body>

<p id="demo">Click one button to add text to this paragraph, click the other button to normalize the paragraph.</p>

<button onclick="addTextNode()">Add a Text Node</button>
<button onclick="normPara()">Normalize the paragraph</button>

<p>The paragraph above has <span id="cc">1</span> child node(s).</p>

<script>
function addTextNode() {
  var x = document.createTextNode(" Click again.");
  var y = document.getElementById("demo");
  y.appendChild(x);
  var x = document.getElementById("cc");
  x.innerHTML = y.childNodes.length;
}

function normPara() {
  var x = document.getElementById("demo");
  x.normalize();
  var y = document.getElementById("cc");
  y.innerHTML = x.childNodes.length;
}
</script>

</body>
</html>

The normalize() method removes empty Text nodes, and joins adjacent Text nodes. 

normalize();



PreviousNext

Related