...

View Full Version : Can't get my head around nodes :-(



d11wtq
12-23-2004, 12:22 PM
Hi,

if I had this on a page



<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


<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 :)

dumpfi
12-23-2004, 01:28 PM
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
}
}

d11wtq
12-23-2004, 02:24 PM
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 :)

d11wtq
12-23-2004, 02:30 PM
If instead of div.appendChild(document.createTextNode('Text'))

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

d11wtq
12-23-2004, 02:47 PM
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?

d11wtq
12-23-2004, 02:49 PM
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

Willy Duitt
12-23-2004, 03:26 PM
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...

Basscyst
12-25-2004, 10:45 PM
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

codegoboom
12-27-2004, 08:53 AM
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 (http://www.developer-x.com/content/innerhtml/) was 'debated' some time ago...

Kor
12-27-2004, 09:45 AM
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).

Basscyst
12-28-2004, 06:46 PM
Great, thanks for the response. I will try to break some of my bad habits.

Basscyst

Kor
12-29-2004, 10:28 AM
:thumbsup:

See here (http://www.codingforums.com/showthread.php?t=46089)
or here (http://www.webdeveloper.com/forum/showthread.php?s=&postid=293931#post293931) to see what i ment...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum