JavaScript Video Tutorial Pt 5

I have received many questions about how to manipulate the Document Object Model (DOM) with JavaScript. In this tutorial I will focus on the many ways to do just that.

I’ll show you how to easily dramatically change your web pages the easy way using getElementById. I’ll then show you how to:

  • Add Elements to a Web Page Dynamically
  • Remove Elements
  • Edit Child Elements

And, much much more….

All of the code used follows the video. if you have any questions or comments leave them below.

More Tutorials are Here Think Tank

Code From the Video

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
<html xmlns=""> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>JavaScript Tutorial</title> 
    <script type="text/javascript"> 
    <!-- Hide this from browsers that donât understand Javascript
      function editNodeText(id, newText) {
        var node = document.getElementById(id);
        // getElementById() returns a reference to the element based off a 
        // provided id
        while (node.firstChild)
          // This code is looking for text in the span and if it finds any it is // deleting it until the span is empty. 
        // The function createTextNode() excepts a variable named newText, and // creates a new node that will contain the text I give to it. You see, // not only is a tag considered a node, but any block of text can also // be considered a node in HTML.
		// I then use the function appendChild() to assign the newly created 
		// text node to the span.
		// Here I'm changing the styling of the node
      /* To understand this code you have to understand what the Document Object Model (DOM) is. The DOM allows you to access all of the objects that lie in your HTML code. Every web page is considered to be a document object. */
      /* Every tag is referred to as a node in the DOM. Javascript can be used to manipulate these HTML elements by referring to them by their defined HTML id name.
      // document refers to the html page 
      // head is the first child node of the document
      // body is the second child of document
      // All other items in the document are easily assigned attributes by id
      function editNodeText2(id, newText) {
        // var node = document.getElementById(id).lastChild; 
        // var node = document.getElementById(id).firstChild;
        var node = document.getElementById(id);
        // node.nodeValue=newText;
        var newNode = document.createElement('hr'); // Creates a new tag element
        node.appendChild(newNode); // Inserts the hr tag
        // Create a text node
        var randTextNode = document.createTextNode("I'm random text"); 
    // --> Finish hiding the Javascript code          
  		<h3>This site requires JavaScript</h3>
  <h5>Javascript Tutorial</h5> 
      <span id="spanEx" onclick="editNodeText('spanEx','New Text is Here')">Change this Text</span><br />
      <div id="divEx" onclick="editNodeText2('divEx','New Text is Here')">
      <b>Some Bold Text</b>
      <i>Italic Text</i>
      </div><br />

11 Responses to “JavaScript Video Tutorial Pt 5”

  1. Rome says:

    Watched this tutorial and decided to try it out. Can you tell me why this doesnt work:

    function changeBorder(){
    var node = document.getElementsByTagName(“p”).style.border=”2px dotted green”;

    return true;

    Your browser doesn’t support javascript.

    This is the first paragraph.

    This is the second paragraph.

    This is the third paragraph.

    • admin says:

      It doesn’t work because Chrome/Firefox/Safari define borders like this “2px dotted green” while IE stores it as “green dotted 2px”.

      It’s better to define a class and then search for that class.

      .greenBox { border: 2px dotted green; }


      If you ever have browser problems blame Internet Explorer 🙂 That’s why I use JQuery whenever possible because it is cross browser

      Here is my JQuery Tutorial


  2. Rome says:

    sorry the “var node” isnt supposed to be in the above code. It’s just that I was trying out different ways to make that function work but even if you delete “var node =” from above it still doesnt work.

  3. Rome says:

    Oh ok, I didn’t know IE handles the border styling differently. What about this though, I tried to create a function to append some stuff to all my paragraphs and it doesn’t work either:

    function appendStuff(){
    var node = document.getElementsByTagName(“p”);
    node.createTextNode(‘Here’s some text’);

    return true;

    Your browser doesn’t support javascript.

    This is the first paragraph.

    This is the second paragraph.

    This is the third paragraph.

  4. Felipe Tejeda says:

    Hey again Derek, hows it’s all sir? thanks to you and your blazing tutorials, I’m completely and slowly (because it’s hard for me) re-discovering programming again like did before in other times (I once became kinda decent in PHP this same way) and now I’m trying to get into javascript but I gotta say, I’m finding it, really hard.

    But back to the subject.

    What I asked in youtube is something about this void I have found in several tutorials that is how to work with the and tags.

    What I need to do is the next thing for example:

    select category

    select item

    Problem 1: Remove tag atribute “disabled=disabled”. I actually have not found or maybe did not notice how to do it.

    Problem 2: Populate the second with array values.
    and come from the same bi-dimensional array. I wanted that once you select a cat in the first select, the second one get its “disabled” attribute removed so it becomes usable and the list gets filled with the second value in the array.

    An example of how the array is, for example, would be like this:

    var everything = Array[cat, items]
    [cars, chevy]
    [cars, mustang]
    [trucks, toyota]
    [cars, acura]
    [cars, camaro]
    [trucks, mitsubishi]

    So if you select cars in you would get:

    select item

    Thats more or less it. I hope you can help me throw in some code so I can dig it, learn it and throw it into my head’s SSD drive.

    Thanks man, I apretiate your help.

    • admin says:

      You’ll probably like to do this with Jquery which is a JavaScript framework. It is easy to dynamically change the select options with jquery. I have a big tutorial on jquery on my site. I hope that helps

  5. Felipe Tejeda says:

    letme edit the post it had HTML tags on it.

  6. totto says:

    Javascript Tutorials 5
    Derek, with the things i’ve learned from the video i try something but don’t work:

    function insertNodeValue()
    var fNode = document.getElementById(“stNode”);
    for (var i = 0; i < 3; i++)
    var node[i] = prompt("insert value for node","");
    node.childNodes[i].nodeValue = node[i];
    for(var j = 0; j < 3; j++)
    return true;
    In the body i have a div called fNode and 3 elements inside (,,)
    i want to insert the value of the prompt();

  7. Rudy Vissers says:

    Mr Banas,

    For completeness you have forgotten the code of the function.

    function addThese(a,b)
    return a+b;

Leave a Reply

Your email address will not be published.