WebReference.com - Part 1 of chapter 5 from Creating Applications with Mozilla. From O'Reilly (4/6).

The setAttribute method changes an existing attribute value. This method is useful for changing the state of an element-its visibility, size, order within a parent, layout and position, style, etc. It takes two arguments: the attribute name and the new value.

<box id="my-id" foo="this is the foo attribute" />
<script>
boxEl=document.getElementById('my-id');
boxEl.setAttribute('foo', 'this is the foo attribute changed');
var foo = boxEl.getAttribute('foo');
dump(foo+'\n');
</script>

The script above outputs the string "this is the foo attribute changed" to the console. You can also use setAttribute to create a new attribute if it does not already exist:

<box id="my-id" />
<script>
boxEl=document.getElementById('my-id');
boxEl.setAttribute('bar', 'this is the new attribute bar');
</script>

By setting an attribute that doesn't already exist, you create it dynamically, adding a value to the hierarchical representation of nodes that form the current document object. After this code is executed, the boxEl element is the same as an element whose bar attribute was hardcoded into the XUL:

<box id="my-id" bar="this is the new attribute bar" />

These sorts of ad hoc changes give you complete control over the state of the application interface.

If you need to dynamically create an element that doesn't already exist-for example, to add a new row to a table displaying rows of information, you can use the method createElement. To create and add a text element to your box example, for example, you can use the following code:

<box id="my-id" />
<script>
boxEl = document.getElementById('my-id');
var textEl  = document.createElement('description');
boxEl.appendChild(textEl);
</script>

Once you create the new element and assign it to the textEl variable, you can use appendChild to insert it into the object tree. In this case, it is appended to boxEl, which becomes the insertion point.

NOTE

For mixed namespace documents like XUL and HTML, you can use a variation of createElement called createElementNS. To create a mixed namespace element, use this code:

var node = document.createElementNS('https://www.w3.org/1999.xhtml', 'html:div');

Namespace variations for other functions include setAttributeNS, getElementsByTagNameNS, and hasAttributeNS.

In addition to setting the label attribute on an element, you can create new text in the interface by using the DOM method createTextNode, as shown in the following example:

<description id="explain" />
<script>
var description = document.getElementById("explain");
if (description) {
if (!description.childNodes.length) {
var textNode = document.createTextNode("Newly text");
description.appendChild(textNode);
}
else if (description.childNodes.length == 1 ) {
description.childNodes[0].nodeValue = "Replacement text";
}
}
</script>

Notice the use of appendChild. This method, discussed next, is used to insert the new element or text node into the DOM tree after it is created. Create-and-append is a common two-step process for adding new elements to the object model.

[previous] [next]

Created: September 19, 2002
Revised: September 19, 2002

URL: https://webreference.com/programming/javascript/mozillaapps/chap5/1/4.html