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>
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>
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.
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?
Hey thanks! (Problem resolved)
Hey thanks! (Problem resolved)
