SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist Jedi007's Avatar
    Join Date
    Aug 2005
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)

    document.write

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

  3. #3
    SitePoint Evangelist Jedi007's Avatar
    Join Date
    Aug 2005
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do I use that?

  4. #4
    SitePoint Enthusiast
    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>

  5. #5
    SitePoint Enthusiast
    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.

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do I use that?
    After carefully studying the subject.

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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?

  8. #8
    SitePoint Evangelist Jedi007's Avatar
    Join Date
    Aug 2005
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    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="^$">

  10. #10
    SitePoint Evangelist Jedi007's Avatar
    Join Date
    Aug 2005
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,227
    Mentioned
    194 Post(s)
    Tagged
    2 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •