Example

  • Revision slug: Using_the_W3C_DOM_Level_1_Core/Example
  • Revision title: Example
  • Revision id: 202595
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment add pre tag

Revision Content

 <html>
 <head>
   <title>My Document</title>
   <script type="text/javascript">
   function change() {
     // document.getElementsByTagName("H1") returns a NodeList of the P
     // elements in the document, and the first is number 0:
     var header = document.getElementsByTagName("H1").item(0);
     // the firstChild of the header is a Text node:
     header.firstChild.data = "A dynamic document";
     // now the header is "A dynamic document".
     var para = document.getElementsByTagName("P").item(0);
     para.firstChild.data = "This is the first paragraph.";
     // create a new Text node for the second paragraph
     var newText = document.createTextNode("This is the second paragraph.");
     // create a new Element to be the second paragraph
     var newElement = document.createElement("P");
     // put the text in the paragraph
     newElement.appendChild(newText);
     // and put the paragraph on the end of the document by appending it to
     // the BODY (which is the parent of para)
     para.parentNode.appendChild(newElement);
   }
   </script>
 </head>
 <body>
   <input type="button" value="Change this document." onclick="change()">
   <h1>Header</h1>
   <p>Paragraph</p>
 </body>
 </head>

Revision Source

<pre> &lt;html&gt;
 &lt;head&gt;
   &lt;title&gt;My Document&lt;/title&gt;
   &lt;script type="text/javascript"&gt;
   function change() {
     // document.getElementsByTagName("H1") returns a NodeList of the P
     // elements in the document, and the first is number 0:
     var header = document.getElementsByTagName("H1").item(0);
     // the firstChild of the header is a Text node:
     header.firstChild.data = "A dynamic document";
     // now the header is "A dynamic document".
     var para = document.getElementsByTagName("P").item(0);
     para.firstChild.data = "This is the first paragraph.";
     // create a new Text node for the second paragraph
     var newText = document.createTextNode("This is the second paragraph.");
     // create a new Element to be the second paragraph
     var newElement = document.createElement("P");
     // put the text in the paragraph
     newElement.appendChild(newText);
     // and put the paragraph on the end of the document by appending it to
     // the BODY (which is the parent of para)
     para.parentNode.appendChild(newElement);
   }
   &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
   &lt;input type="button" value="Change this document." onclick="change()"&gt;
   &lt;h1&gt;Header&lt;/h1&gt;
   &lt;p&gt;Paragraph&lt;/p&gt;
 &lt;/body&gt;
 &lt;/head&gt;
</pre>
Revert to this revision