Jump to content

JavaScript/Changing elements

From Wikibooks, open books for an open world



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 | edit source]

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 | edit source]

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 | edit source]

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 | edit source]

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";
}

See also

[edit | edit source]

Exercises

[edit | edit source]
... are available on another page (click here).