mozilla

Revision 202593 of Example

  • Revision slug: Using_the_W3C_DOM_Level_1_Core/Example
  • Revision title: Example
  • Revision id: 202593
  • Created:
  • Creator: Gor1
  • Is current revision? No
  • Comment
Tags: 

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()">

Header

Paragraph

</body> </head>

Revision Source

<p>&lt;html&gt;
&lt;head&gt;
</p>
<pre class="eval"> &lt;title&gt;My Document&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
</pre>
<pre class="eval"> 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;
</pre>
<p>&lt;/head&gt;
&lt;body&gt;
</p>
<pre class="eval"> &lt;input type="button" value="Change this document." onclick="change()"&gt;
</pre>
  <h2 name="Header">Header</h2>
  <p>Paragraph</p>
<p>&lt;/body&gt;
&lt;/head&gt;
</p>
Revert to this revision