ava script tutorial - a new approach by Ken J Ward

Java Script Tutorial - Appending text


Appending Text

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.



My special paragraph

 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="appendNewText()" />

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


<script type="text/javascript">

function appendNewText()

{

var newText = document.createTextNode

(document.getElementById('t1').value);

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

para.appendChild(newText);

}

</script>


First we create a new text node for the paragraph using "createTextNode()". The value of the new text comes from the input edit with the ID "t1". We use "getElementById" to find this, and we use "getElementById" similarly to find the paragraph we want to change ("example1").

Finally, we append the new text to the node we created at the beginning of the function above.

 

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

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