JavaScript/Changing elements

Adding elements

Removing elements

Adding elements

Removing elements

On this page, we show how to change two different things of an HTML element, respectively, DOM node.

Its content (there is only one - or none)
Any of its attributes (there may be many)

Please take note of this distinction between content and attributes.

<!-- in general: -->
<element_name attribute_name="attribute_value">content of the element</element_name>
<!-- a concrete example. 'href' is an attribute. 'Visit IANA...' is the content. -->
<a href="https://www.example.com">Visit IANA's example domain.</a>

Example page edit

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

<!DOCTYPE html>
<html>
<head>
  <script>
    function show() {
      "use strict";
      // ...
    }
  </script>
</head>

<body id="body" style="margin:2em">
  <p id="p1" style="background: aqua">A blue paragraph</p>

  <svg id="svgSrc" width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="25" fill="green"/>
  </svg>

  <p />
  <a id="refToSomewhere" href="https://www.example.com">Visit IANA's example domain.</a>

  <p />
  <button id="buttonShow" onclick="show()">Start</button>
</body>
</html>

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

Change the content edit

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

function show() {
  "use strict";
  const elem = document.getElementById("p1");
  elem.innerHTML = "New text in the paragraph.";
}

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

function show() {
  "use strict";
  const elem = document.getElementById("svgSrc");
  elem.innerHTML = "<rect width='80' height='40' fill='blue'/>";
}

Because the new text is HTML code, you can 'misuse' this approach to add child nodes.

function show() {
  "use strict";
  const elem = document.getElementById("p1");
  elem.innerHTML = "New text in the paragraph.<p>next P</p><p>and even one more P</p>";
}

The script inserts two more paragraphs, but not behind the first one. They are within the first one.

<p id="p1">New text in the paragraph
  <p>next P</p>
  <p>and even one more P</p>
</p>

Change an attribute edit

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

element_name.attribute_name = "new value";
// or:
element_name.setAttribute("attribute_name", "new value");

The HTML element a knows a href attribute: <a id="refToSomewhere" href="https://www.example.com">...</a>. This href attribute can be changed:

function show() {
  "use strict";
  const elem = document.getElementById("refToSomewhere");
  elem.href = "https://en.wikibooks.org";
  elem.innerHTML = "Link 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 src attribute of img element and the value attribute of button element

// The HTML
<img id="imgOne" src="myPicture.jpg">
<input id="buttonOne" value="I'm a button!">

// The JavaScript
document.getElementById("imgOne").src = "otherPicture.jpg";
const b = document.getElementById("buttonOne");
b.value = "I'm a changed button";

setAttribute() edit

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

function show() {
  "use strict";
  const elem = document.getElementById("refToSomewhere");
  elem.setAttribute("href", "https://en.wikibooks.org");
  elem.innerHTML = "Link changed";
}

Exercises edit

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