Append New Line to text in element

This site is best viewed in a modern browser with JavaScript enabled.

edcompsci

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:

<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/archive/index.php/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:

<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

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.

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

edcompsci;1103660 wrote:
From this link:

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

edcompsci

Thanks. I'll take that advice.

edcompsci

Not sure why it's not working.

<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

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

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:

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

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

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

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

edcompsci

<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

Missed a parenthesis.

function AppendNewLine(form)
{
var thep = document.getElementById("myP");
thep.appendChild(document.createElement("br"));
thep.appendChild(document.createTextNode("Is this on a new line?")[B][COLOR="Red"])[/COLOR][/B];
}

edcompsci

Hey thanks! (Problem resolved)