Append New Line to text in element

**edcompsci** · 07-22-2010 06:18 AM

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 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>

**Declan1991** · 07-22-2010 06:55 AM

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.

**Kor** · 07-22-2010 08:00 AM

Originally Posted by edcompsci

From this link:

From that link, if carefully read, you should have seen that document.write() is not a dynamic method, as well.

**edcompsci** · 07-22-2010 08:54 AM

Thanks. I'll take that advice.

**edcompsci** · 07-22-2010 09:34 AM

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>

**Kor** · 07-22-2010 09:43 AM

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.

**edcompsci** · 07-22-2010 10:38 AM

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 tag. If I can append text to different elements by id, then I can do it not just with 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.

**Declan1991** · 07-22-2010 04:19 PM

document.all is an old IE only method, never use it.

You can append elements to anything but an empty element, like and <img>.

Code:

function AppendNewLine(form)
{
var thep = document.getElementById("myP");
thep.appendChild(document.createTextNode("new line?");
thep.appendChild(document.createElement("br"));
}

**edcompsci** · 07-22-2010 06:54 PM

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?

**Declan1991** · 07-22-2010 07:04 PM

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?"));
}

**edcompsci** · 07-23-2010 11:34 PM

Hey thanks! (Problem resolved)

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

Thread Tools

Display

Append New Line to text in <p> element

Thanks

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

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

So you mean do something like

Hey thanks! (Problem resolved)

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions