www.webdeveloper.com
Results 1 to 11 of 11

Thread: Append New Line to text in <p> element

  1. #1
    Join Date
    Nov 2006
    Location
    Oceanside, CA
    Posts
    11

    Append New Line to text in <p> element

    I am trying to make sense of the uses of the document.all and/or document.getElementbyId javascript functions. I just thought that I could use this code:
    Code:
    <script type="text/javascript">
    function AppendNewLine()
    {
    document.write("In Function");
    var myPar = document.getElementbyId("myP");
    myPar+="\n";
    myPar+="New Line?\n";
    document.write(MyPar);
    }
    </script>
    <p id="myP" value="value" >Append New Line<br /></p>
    <input type="button" value="Append" onclick="AppendNewLine()" />
    to append a new line to a paragraph on the page. Can someone tell me if I am on the right track, and where I went wrong, or am I all together wrong and where should I restart, and especially, WHY this doesn't work?

    From this link:
    http://www.webdeveloper.com/forum/ar...p/t-93903.html

    I see a way to append to the whole document, but not to an individual <p> element.

    I had already begun to change my code, when I realized that it wasn't going to be applied to the p element:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function AppendNewLine()
    {
    document.write("In Function");
    myText = document.createTextNode('\nNew Line?');
    myParagraph.appendChild(myText);
    
    var myPar = document.getElementbyId("myP");
    myPar+="\n";
    myPar+="";
    document.write(MyPar);
    }
    </script>
    </head>
    <body>
    <p id="myP" value="value" >Append New Line<br /></p>
    <input type="button" value="Append" onclick="AppendNewLine()" />
    </body>
    Last edited by edcompsci; 07-22-2010 at 07:50 AM.

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    I've no idea what your code is supposed to be doing. document.getElementById, as the name suggests, returns an element, nothing else. You can use the innerHTML property of that element to change the contents.
    Code:
    function appendNewline () {
    document.getElementbyId("myP").innerHTML += "New line\n (But if you want that to appear on the page) <br>";
    }
    You cannot use document.write after page load.

    Also research DOM methods such as document.createElement, document.appendChild.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by edcompsci View Post
    From this link:
    From that link, if carefully read, you should have seen that document.write() is not a dynamic method, as well.

  4. #4
    Join Date
    Nov 2006
    Location
    Oceanside, CA
    Posts
    11

    Thanks

    Thanks. I'll take that advice.

  5. #5
    Join Date
    Nov 2006
    Location
    Oceanside, CA
    Posts
    11

    This is what I have so far, still working on it

    Not sure why it's not working.

    Code:
    <html>
    <head>
    <style>
    midscreen {position:absolute;top:500px;left:500px;}
    </style>
    <script type="text/javascript">
    function AppendNewLine(form)
    {
    var newline = document.createElement("BR");
    newline.appendChild(document.createTextNode("new line?");
    document.getElementById("myP").appendChild(newline);
    
    }
    </script>
    </head>
    <body>
    <p id="myP" value="value" >Append New Line<br /></p>
    <midscreen><input type="button" value="Append" onclick="AppendNewLine(this.form)" /></midscreen>
    </body>
    </html>

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    a BR element is a non-empty tag (same as IMG, INPUT...). It can not have child nodes, so that you can append nothing to it. On the other hand: what's the use of appending a BR element inside a P element?

    Post how do you expect your HTML code should look like. In fact, tell us what is your real need.
    Last edited by Kor; 07-22-2010 at 10:46 AM.

  7. #7
    Join Date
    Nov 2006
    Location
    Oceanside, CA
    Posts
    11

    That's a great question. I'll try to answer.

    Basically, being very beginner, I bought a book (The Javascript Bible), and randomly found the beginning of Ch 15 on generic HTML Element Objects, and stumbled into all[] (and getElementbyId() since it's used in it's place in many situations) and their example:
    Code:
    var paragraph=document.all("myP");
    simply got me curious to what I might be able to do with a <p> tag. If I can append text to different elements by id, then I can do it not just with <p> but <div>, for example, and have text appear pretty much anywhere on the page I want. My intentions are not for any particular project, just for learning.

  8. #8
    Join Date
    Aug 2007
    Posts
    3,767
    document.all is an old IE only method, never use it.

    You can append elements to anything but an empty element, like <br> and <img>.
    Code:
    function AppendNewLine(form)
    {
    var thep = document.getElementById("myP");
    thep.appendChild(document.createTextNode("new line?");
    thep.appendChild(document.createElement("br"));
    }

  9. #9
    Join Date
    Nov 2006
    Location
    Oceanside, CA
    Posts
    11

    So you mean do something like

    Code:
    <html>
    <head>
    <style>
    midscreen {position:absolute;top:500px;left:500px;}
    </style>
    <script type="text/javascript">
    function AppendNewLine(form)
    {
    var thep = document.getElementById("myP");
    thep.appendChild(document.createElement("br"));
    thep.appendChild(document.createTextNode("Is this on a new line?");
    
    }
    </script>
    </head>
    <body>
    <p id="myP">Append New Line</p>
    <midscreen><form><input type="button" value="Append" onclick="AppendNewLine(this.form)" /></form></midscreen>
    </body>
    </html>
    ?
    Not working. Maybe because of my using Firefox 4 beta, or is the code still off?

  10. #10
    Join Date
    Aug 2007
    Posts
    3,767
    Missed a parenthesis.
    Code:
    function AppendNewLine(form)
    {
    var thep = document.getElementById("myP");
    thep.appendChild(document.createElement("br"));
    thep.appendChild(document.createTextNode("Is this on a new line?"));
    }

  11. #11
    Join Date
    Nov 2006
    Location
    Oceanside, CA
    Posts
    11

    Hey thanks! (Problem resolved)

    Hey thanks! (Problem resolved)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles