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.
As in previous lessons in this series, the paragraph in question is given a
unique ID. The code for the paragraph is:
That is, the paragraph is given the ID, "example1".
The "Append Text" button calls a function:
<input type="button" value="append
The function, "appendNewText()" is as follows:
var para = document.getElementById("myPara1");
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:
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.