ff45t1z Posted April 8, 2007 Share Posted April 8, 2007 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. Link to comment Share on other sites More sharing options...
jesh Posted April 9, 2007 Share Posted April 9, 2007 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 = ""; Link to comment Share on other sites More sharing options...
ff45t1z Posted April 12, 2007 Author Share Posted April 12, 2007 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. Link to comment Share on other sites More sharing options...
jesh Posted April 12, 2007 Share Posted April 12, 2007 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"; Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now