1/17/11

Working with DOM , nodes and Objects (part 1) : Adding Nodes

JavaScript is an Object Oriented Programming (OOP) language.

An OOP language allows you to define your own objects and make your own variable types.

Note that an object is just a special kind of data. An object has properties and methods.

The HTML DOM is a W3C standard and it is an abbreviation for the Document Object Model for HTML.


The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents.

*----------------------*----------------------*---------------------*


HTML CODE:


<html>
<head>
    <title>Adding Nodes</title>
    <script type="text/javascript" src="script.js">
    </script>
</head>
<body>
    <form action="#">
       <p> 
       <textarea id="textArea" rows="5" cols="30"></textarea> 
       </p>
       <input type="submit" value="Add some text to the page"/>
    </form>
</body>
</html>


script.js :


window.onload = initAll;

function initAll() {
  document.getElementsByTagName("form")[0].onsubmit = addNode;
}

function addNode() {
  var inText = document.getElementById("textArea").value;
  var newText = document.createTextNode(inText);

  var newGraf = document.createElement("p");
  newGraf.appendChild(newText);

  var docBody = document.getElementsByTagName("body")[0];
  docBody.appendChild(newGraf);
    
  return false;
}


It works like this :



 
Before Adding Node (UP)


After Adding A Node.




With this u can Make a Dyanmic Adding of comment into your site,blog etc.

SHARE THIS POST: