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

Chapter 4. Content > Inserting a New Element

Inserting a New Element

To create dynamic Web pages, you often need to make changes to the page in reaction to the visitor’s actions. Often, you will make changes by showing and hiding content that is already on the page. However, you can’t always plan for every contingency.

In this section (and the next two) I’ll show you how to add new elements to the Web page. These dynamically created elements can be inserted in a variety of ways. In this example, we’ll look at how add to an image tag, inserting it at the end of the document using the appendChild() method.

In the next three sections, you can see examples of how to replace elements before a particular object on the page, replace a particular object on the page, and remove an object from the screen entirely (Table 4.1).

Table 4.1. Content Replacement Methods
MethodWhere it works
appendChild(newElement)Places new element as the last child in the invoking child’s parent.
insertBefore(newElement,referenceObject)Places the new element immediately before the referenced object.
replaceChild(newElement,oldObject)Replaces the old element with the new.
removeChild(referenceObject)Removes the referenced object.

To insert a new element:

function addImageElement(srcVal,
→ widthVal,heightVal,altVal) {...}

Add the function addImageElement() to your JavaScript (Code 4.10). This function will be used to add an <img> tag to the page, but you can change this function to add any HTML tag you desire, using the values passed to it for the various attributes. Steps 2–4 apply to this function.

Code 4.10. The function addImageElement() is used to add a new <img> tag to the HTML document without having to reload the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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 Element</title>
        <script language="javascript" type="text/javascript">
           function addImageElement(srcVal,widthVal,heightVal,altVal) {
								var newImageElement = document.createElement('img');
        <h2>CHAPTER VII</h2>
        <h3>The Lion and the Unicorn</h3>
        <a href="javascript:void('')"onclick="addImageElement('Alice_7_4.jpg','300','230','the Lionand the Unicorn')">View Image</a>
        <p>The next moment soldiers came running through the wood...</p><br />


var newImageElement =
→ document.createElement('img');

Add a new variable called newImageElement that will represent the code for the new image, and use createElement(), passing it the selector of the HTML tag you’ll be creating, in this case img.

→ ('src',srcVal);

Use setAttribute() to add attributes to the tag, passing it the attribute name and then the value to be assigned to it. For the image tag there are several attributes you can add, but you must specify the source (src).

→ (newImageElement)

The tag is then actually added to the document using appendChild(), which places the new tag at the bottom of the document.

→ ('Alice_7_4.jpg','300','230',
→ 'the Lion and the Unicorn')"

Add an event handler to trigger the function addImageElement(). In this example, I’m using a simple link, but the event handler could be anywhere. When clicked, the image is added at the end of the document (Figures 4.15 and 4.16). Every time the link is clicked, a new instance of the image is created.

Figure 4.15. Before the link is clicked.

Figure 4.16. After the link is clicked the image is inserted into the page at the bottom. Clicking the link again will insert another copy of the image.

✓ Tips

  • You can’t stick the function call for addImageElement() directly to the href for the link since it wouldn’t generate an actual event as required for the function to work.

  • If the image file referenced by the new tag isn’t in the right place, the broken image tag will appear, which is not generally considered a good thing.

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