document.write one part

**Jedi007** · Oct 17, 2005, 16:22

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?

**Mittineague** · Oct 17, 2005, 16:35

Don't use document.write Use the DOM to replace text nodes.

**Jedi007** · Oct 18, 2005, 16:40

how do I use that?

**torunforever** · Oct 18, 2005, 19:23

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>

**torunforever** · Oct 18, 2005, 19:35

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.

**7stud** · Oct 18, 2005, 23:02

how do I use that?

After carefully studying the subject.

**torunforever** · Oct 19, 2005, 01:26

Originally Posted by 7stud

After carefully studying the subject.

Ah man, so are you saying I shouldn't have given any examples, because Jedi007 should just go read hours and hours of external resources anyway?

**Jedi007** · Oct 22, 2005, 13:50

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?

**felgall** · Oct 22, 2005, 14:19

Use whatever tags you want around the code.

**Jedi007** · Oct 22, 2005, 14:21

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?

**Mittineague** · Oct 22, 2005, 15:03

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.

The SitePoint Forums have moved.

User Tag List

Thread: document.write one part

Thread Tools

Display

document.write one part

document.write

replace instead of append

Bookmarks

Bookmarks

Posting Permissions