ava script tutorial - a new approach by Ken J Ward

Java Script Tutorial - Appending text


Appending Text 2 (and deleting it)

In this example, text is added to the paragraph. Each time you click the button below, new text is added. The new text that is added is the text in the input edit box below. Try clicking the button to see if it works. This differs from the previous in that you can also delete all the text in the paragraph, whereas, in the previous example of appending text, you could only delete the text you had just added. 





Some text


 As in previous lessons in this series, the paragraph in question is given a unique ID. The code for the paragraph is:

<p id="example1"></p>

That is, the paragraph is given the ID, "example1".

The "Append Text" button calls a function:

<input type="button" value="append Text" onClick="appendNewText2()">

The function, "appendNewText()" is as follows:


 

<script type="text/javascript">

function appendNewText()

{

var para = document.getElementById("myPara1");

para.lastChild.nodeValue =

para.lastChild.nodeValue+

document.getElementById('t1').value;

}

</script>


The difference between the previous example of appending text and this one is in the line marked in bold and blue above, and repeated below:

para.lastChild.nodeValue =

para.lastChild.nodeValue+

document.getElementById('t1').value;

We do not create a new text node, as previously, but simply add the current value of the paragraph to the stuff we want to add.

[If you need to learn more about HTML visit the HTML Tutorial]

I am always pleased to hear from you.
Send your comments to