• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Content > Inserting a New Text Element

Inserting a New Text Element

In the previous section, I showed you how to add a new element to a Web page after the page has loaded. However, the technique shown would only allow you to add tags without any text. In this section, I’ll show you how to place text between the tags.

Also, the previous example demonstrated how to insert the new element at the end of the document. This example shows you how to add the new element before a specific object on the page by using insertBefore().

To insert a new tag with text:

function addTextElement
→ (beforeObjectID,textVal) {...}

Add the function addTextElement() to your JavaScript (Code 4.11). This function is passed a text value (textVal), which it then places before a specific object (beforeObjectID). Steps 2–6 apply to this function.

Code 4.11. The function addTextElement() not only adds a new HTML tag to the document, it also adds text to the tag.

→ Transitional//EN" "http://www.w3.org/TR/
→ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
→ xml:lang="en">
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced |
        → Inserting a New Text Element</title>
        <script language="javascript"
        → type="text/javascript">
           function addTextElement(beforeObjectID,textVal) {
								var newTextElement =document.createElement('p');
								var newText = document.createTextNode(textVal);
								var beforeObject = document.getElementById(beforeObjectID);
        <h2>CHAPTER VII</h2>
        <h3>The Lion and the Unicorn</h3>
        <div id="chapterText">
        <a href="javascript:void('')" onclick="addTextElement('chapterText','Thenext moment soldiers came runningthrough the wood, at first in twos andthrees, then ten or twenty together,and at last in such crowds that theyseemed to fill the whole forest. Alicegot behind a tree, for fear of beingrun over, and watched them goby.')" >Read Text</a><br />
        <img src="Alice_7_4.jpg" alt="The
        → Lion and the Unicorn" width="300"
        → height="230" border="0"/>


var newTextElement =
→ document.createElement('p');

Define a variable to store the new element, using createElement() to pass the selector for the tag used to create the new element. In this example, we are setting up a paragraph (p), but you could use any tag that can contain text (span, i, b, and so on).

var newText = document.
→ createTextNode(textVal);

Define a variable to create a new text block (node), using createTextNode() to pass it the string of text (textVal) to be used.


Use appendChild() to add the text node from step 3 into the element created in step 2.

var beforeObject = document.
→ getElementById(beforeObjectID);

Define a new variable to record the object before which the new text element will be inserted, using getElementById().

→ (newTextElement,beforeObject);

Use the insertBefore() method to add the new text element before the specified object.

→ ('chapterText','The next moment
→ soldiers...')">Read Text</a>

Add an event handler in your HTML to trigger the addTextElement() function, passing the function the ID for the object before which you want the text inserted and then (in single quotes) the text you want inserted (Figures 4.17 and 4.18).

Figure 4.17. Before the link is clicked.

Figure 4.18. After the link is clicked the text is inserted before the link. Clicking the link again will insert another copy of the text.

✓ Tip

  • Although this example shows how to add text that has been hard-coded, you could also adapt it to read text that has been typed into a form field and then write that text to the page.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint