SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
Thread: document.write one part
-
Oct 17, 2005, 16:22 #1
document.write one part
I only want to make a document.write in a certain place onMouseOver, but how do I do that without it replaceing the whole page?
-
Oct 17, 2005, 16:35 #2
- Join Date
- Jul 2005
- Location
- West Springfield, Massachusetts
- Posts
- 17,290
- Mentioned
- 198 Post(s)
- Tagged
- 3 Thread(s)
document.write
Don't use document.write Use the DOM to replace text nodes.
Big Change Coming Soon - if you want your PMs save them now!
What you need to do to prepare for our migration to Discourse
A New SitePoint Forum Experience: Our Move to Discourse
-
Oct 18, 2005, 16:40 #3
how do I use that?
-
Oct 18, 2005, 19:23 #4
- Join Date
- Sep 2005
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Refer to the following example.
I don't recommend using innerHTML to add anything but plain text (no html tags), but as you can tell, my example does just that, and this particular example works in IE 6 and Firefox. The problem with innerHTML is it isn't reliable when adding lots of complex markup. So what are you supposed to do to add lots of complex markup? A combination of createElement and appendChild like in my addElementToTheEnd example. You would keep doing that until you've built your whole structure. You can set element properties like I did with x.style.color
Code:<html> <head> <script type="text/javascript"> <!-- var i=0; function addTextToTheEnd() { var x = document.createTextNode('new text ' + i); document.body.appendChild(x); i++; } function addElementToTheEnd() { var x = document.createElement('p'); var y = document.createTextNode('new text in p ' + i); x.appendChild(y); x.style.color = 'blue'; document.body.appendChild(x); i++; } function addElementUsingInnerHTML() { var x = document.createElement('p'); x.innerHTML = '<form><input type="text" id="test' + i + '" /><input type="button" value="click" onclick="alert(document.getElementById(\'test' + i + '\').value)" /></form> ' + i; document.body.appendChild(x); i++; } //--> </script> </head> <body> <form> <input type="button" value="Add text to the end" onclick="addTextToTheEnd();" /> <input type="button" value="Add an element to the end" onclick="addElementToTheEnd();" /> <input type="button" value="Add an element using innerHTML" onclick="addElementUsingInnerHTML();" /> </form> <p>existing text</p> </body> </html>
-
Oct 18, 2005, 19:35 #5
- Join Date
- Sep 2005
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you want to append to a certain part of the page, then it's best to put an empty element where you want it in the original markup of the page. So if you had a div element somewhere in the page, you'd get a reference to it using something like
yourObj = document.getElementById('yourobjID');
Then append to it like
var x = document.createTextNode('test');
yourObj.appendChild(x);
You might notice the append technique will keep adding on top of what's already in there. That's why if you're going to add just some text to an element, you'd be better off using innerHTML. Then you don't have to worry about using the DOM to remove the existing nodes.
yourObj = document.getElementById('yourobjID');
yourObj.innerHTML = 'test innerHTML';
That will replace the contents of the div.
-
Oct 18, 2005, 23:02 #6
- Join Date
- Mar 2001
- Posts
- 3,537
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
how do I use that?
-
Oct 19, 2005, 01:26 #7
- Join Date
- Sep 2005
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by 7stud
-
Oct 22, 2005, 13:50 #8
whoosh, thanks torunforever (big help
)
Is there a way to not put it at the end? - what i mean is, divs are useful, but can I make it without divs?
One other question too, if i use the div strategy, and I put a div then I make it so that it posts a var, then later when you do an onmouseover on something, it changes the var wich changes the message, or will the message stay the same?
-
Oct 22, 2005, 14:19 #9
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
Use whatever tags you want around the code.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Oct 22, 2005, 14:21 #10
Okay, i've tried the document.write var changing thing (2 posts above), but it doesnt work so that brings up a new question, how do I change texts?
-
Oct 22, 2005, 15:03 #11
- Join Date
- Jul 2005
- Location
- West Springfield, Massachusetts
- Posts
- 17,290
- Mentioned
- 198 Post(s)
- Tagged
- 3 Thread(s)
replace instead of append
Because you said you wanted to create text, torunforever showed an example using appendChild. To replace text use replaceChild. If you do some searching
for - DOM - , you will discover how useful it is.
Big Change Coming Soon - if you want your PMs save them now!
What you need to do to prepare for our migration to Discourse
A New SitePoint Forum Experience: Our Move to Discourse
Bookmarks