JavaScript/Changing elements

On this page, we show how to change two different things of an HTML element, respectively, DOM node. Please take note of this distinction between content and attributes.
 * Its content (there is only one - or none)
 * Any of its attributes (there may be many)

Example page
We use the following example HTML page to demonstrate the possibilities.

Clicking on the  invokes the function. The examples should be included there.

Change the content
We use the example of a paragraph. To change its content, the text, just assign the new value to its.

Or, to do the same with a different HTML element, we change the SVG graphic.

Because the new text is HTML code, you can 'misuse' this approach to add child nodes. The script inserts two more paragraphs, but not behind the first one. They are within the first one.

Change an attribute
In general, the syntax to change attributes is as follows:

The HTML element  knows a   attribute:. This  attribute can be changed:

First, the element is located. Second, the function assigns a new value to its attribute 'href' (and to the innerHTML).

The following example changes the  attribute of   element and the   attribute of   element

setAttribute
The modification of attributes can also be done via the function.

Exercises

 * ... are available on another page (click here).