JavaScript/Changing 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_nameattribute_name="attribute_value">content of the element</element_name><!-- a concrete example. 'href' is an attribute. 'Visit IANA...' is the content. --><ahref="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>functionshow(){"use strict";// ...}</script></head><bodyid="body"style="margin:2em"><pid="p1"style="background: aqua">A blue paragraph</p><svgid="svgSrc"width="100"height="100"viewBox="0 0 100 100"><circlecx="50"cy="50"r="25"fill="green"/></svg><p/><aid="refToSomewhere"href="https://www.example.com">Visit IANA's example domain.</a><p/><buttonid="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.
functionshow(){"use strict";constelem=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.
functionshow(){"use strict";constelem=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.
functionshow(){"use strict";constelem=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.
<pid="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:
functionshow(){"use strict";constelem=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 <imgid="imgOne"src="myPicture.jpg"><inputid="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.
functionshow(){"use strict";constelem=document.getElementById("refToSomewhere");elem.setAttribute("href","https://en.wikibooks.org");elem.innerHTML="Link changed";}