removing nodes

[ff45t1z]

Now i'm fairly new to javascript, but just to hone myself up, i've been working on a little function that prints some text up when the mouse hovers over an element. the logical way to do this as far as I know, is to use HTML DOM to create a text node inside a DIV to print the text up. So far this has worked just fine, with just one problem. I can't seem to find a way to remove the text nodes once they are created. ( In essence, roll in prints it into the DIV, rollout removes it. ) and yes, i'm aware that using CSS, images or any other lot of tricks I could probably do something cleaner and better, but i'm just priming myself haha,here's my code so far:This is the function to add the text into the div "box" on rollover,function roll1(){ document.roll1p.src ="3.png" ;var node=document.createTextNode(" this is a test.");document.getElementById("box").appendChild(node);}this works just fine,But what I can't do is find a way of targeting that node again and removing the text from that box.I think this code should suffice so you can see what i'm doing.Any help would be very much appreciated.

[jesh]

You might try something like this:

var box = document.getElementById("box");box.removeChild(box.lastChild);

Check out the XML DOM tutorial as well. While the HTML DOM tutorial does a great job talking about the different methods and properties available to various HTML elements, the XML DOM does a great job talking about how to manipulate (e.g. add nodes, traverse nodes, remove nodes, etc.) the DOM.Another way, which may be a little more simple, would be to use the innerHTML property instead:

function roll1(){ document.roll1p.src ="3.png";document.getElementById("box").innerHTML = "this is a test";}

Then, to remove the text:

document.getElementById("box").innerHTML = "";

[ff45t1z]

hey thanks heaps for that! I'll give it a go tonight. And i'll let you know how it goes.I found a good workaround in CSS, but that isn't the point anymore, i'd like to learn how to remove the node too.The workaround just revolves around different <span> tags hidden inside and using CSS to switch to 'display:block' them on hover. Which is probably more browser friendly. But yeah, i'll let you know how it goes.

[jesh]

Ah, yeah, that's another way to do it:

<div id="myDiv" style="display: none;">Some text that isn't seen right away.</div>

document.getElementById("myDiv").style.display = "block";