Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get my head around nodes :-(

    Hi,

    if I had this on a page

    Code:
    <div id="div1">
    I want a new div with some contents to appear below
    </div>
    
    <p>
    
    <div id="div2">
    <a href="javascript:addNode()">Click to insert the node</a>
    <a href="javascript:delNode()">Click to delete the node</a>
    </div>
    And basically the two links insert some content (another div which can have contents added dynamically like a normal div), and remove it.

    Lets say for argument's sake I want this to happen
    Code:
    <div id="div1">
    I want a new div with some contents to appear below
    
    <div id="newDiv">Hello World!</div>
    
    </div>
    
    <p>
    
    <div id="div2">
    <a href="javascript:addNode()">Click to insert the node</a>
    <a href="javascript:delNode()">Click to delete the node</a>
    </div>
    I don't even know where to start with creating the node and adding content to it. I'm not even sure if it is adding removing nodes that performs this task.

    I'm reasonably copmpetent with javascript but have never worked with nodes and can't grasp the concept so if anybody could make it as simple as possible that's be good and I'll delve deeper from there.

    Thanks

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Code:
    function addNode() {
      var div = document.createElement("div"); // create a div element
      div.id = "newDiv"; // give it an id
      div.appendChild(document.createTextNode("Hello World!")); // create a text node with "Hello World!" and append it to the div
      var div1 = document.getElementById("div1"); // get the div with the id "div1" and use it as starting point for adding nodes
      div1.parentNode.appendChild(div); // we append to the parent element of "div1" the newly created node
    }
    function delNode() {
      var div1 = document.getElementById("div1"); // get the div with the id "div1" and use it as starting point for deleting nodes
      var remove_child = div1.parentNode.childNodes[div1.parentNode.childNodes.length - 1]; // we want the last child of the parent of "div1" to be removed
      // we delete the child if it isn't the one with the id "div1"
      if(typeof(remove_child.id) == "undefined" || remove_child.id != "div1") {
        div1.parentNode.removeChild(remove_child); // we use the removeChild function of the parent element of "div1" to remove the child
      }
    }
    Last edited by dumpfi; 12-23-2004 at 01:30 PM.

  • #3
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for that. That makes 10 times more sense than the DOM stuff I found in google.

    If know what it's doing really simply I find it loads easier to work out how it all works.

    Pretty simple really.

    Thanks

  • #4
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If instead of div.appendChild(document.createTextNode('Text'))

    I used div.InnerHTML = 'text' Do I get the same outcome?

  • #5
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Instead of createTextNode how do I add some HTML?

    Title says it all

    When I try to put some html such as <br> in a createTextNode it is displayed as text not html. How can I make it be seen as html?

  • #6
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh... oops. It is just elem.innerHTML = //the html code

    I've used that for ages. I just didn't realise how was related to the DOM

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by d11wtq
    Oh... oops. It is just elem.innerHTML = //the html code

    I've used that for ages. I just didn't realise how was related to the DOM
    It's not...

    innerHTML is to the DOM...
    As processed meat is to steak...

    If you are going to use innerHTML, you may as well use style.display and toggle block/none....

    .....Willy

    BTW: If you want to add a break to the textNode you will need to create another element ( br ) and append that to it...

  • #8
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by Willy Duitt
    It's not...

    innerHTML is to the DOM...
    As processed meat is to steak...

    If you are going to use innerHTML, you may as well use style.display and toggle block/none....

    .....Willy

    BTW: If you want to add a break to the textNode you will need to create another element ( br ) and append that to it...
    What's the harm? I'm seriously asking, not challenging you. I mean, it is supported by most major browsers, and is so much simpler. I use it all the time for my apps, which are IE only, so I don't really care in that aspect. For my greater good though, why is it better to create and append in lieu of innerHTML?

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #9
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, if using the DHTML Object Model is easier and works for your purposes, by all means, use it: it was made for you.
    BTW, innerHTML VS DOM was 'debated' some time ago...
    *this message will self destruct in n-seconds*

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Basscyst
    What's the harm? I'm seriously asking, not challenging you. I mean, it is supported by most major browsers, and is so much simpler. I use it all the time for my apps, which are IE only, so I don't really care in that aspect. For my greater good though, why is it better to create and append in lieu of innerHTML?

    Basscyst
    It might be no harm wether:
    1. You need a simple text to be inserted, or a very short HTML code line
    2. The future browsers will keep the innerHTML method (which is not amongst the w3c recomandations)

    When dealing with a little more intricate HTML codes (ie: tables) and you need to change the objects/attributes dinamically several times on the page (ie: sorting columns) you will discover DOM methods are by far much easier and much logical to use).
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Great, thanks for the response. I will try to break some of my bad habits.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #12
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts


    See here
    or here to see what i ment...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •