JavaScript HTML DOM Changing HTML
JavaScript provides a variety of methods for changing the HTML content of an element in the Document Object Model (DOM).
Here are a few examples:
Changing the text content of an element
To change the text content of an HTML element, you can use the textContent
property.
As an example:
Editor
In this example:
- The
getElementById()
method is used to get the<p>
element with the ID"myParagraph"
. - The
textContent
property is then used to change the text content of the element to"This paragraph has been changed."
.
Changing the HTML content of an element
To change the HTML content of an element, you can use the innerHTML
property.
As an example:
Editor
In this example:
- The
getElementById()
method is used to get the<p>
element with the ID"myParagraph"
. - The
innerHTML
property is then used to change the HTML content of the element to"<em>This paragraph</em> has been changed."
.
Changing the value of an input element
To change the value of an input element, you can use the value
property.
As an example:
Editor
In this example:
- The
getElementById()
method is used to get the<input>
element with the ID"myInput"
. - The
value
property is then used to change the value of the element to"New value"
.
Changing the src attribute of an image element
To change the source (src) attribute of an image element, you can use the setAttribute()
method.
As an example:
Editor
In this example:
- The
getElementById()
method is used to get the<img>
element with the ID"myImage"
. - The
setAttribute()
method is then used to change the src attribute of the element to"image2.jpg"
.
Changing the style of an element
To change the style of an HTML element, you can use the style
property to access the inline style of the element.
As an example:
Editor
In this example:
- The
getElementById()
method is used to get the<p>
element with the ID"myParagraph"
. - The
style
property is then used to change the color of the text to"blue"
and the font size to"20px"
.
Changing the class of an element
To change the class of an HTML element, you can use the className
property.
As an example:
Editor
In this example:
- The
getElementById()
method is used to get the<p>
element with the ID"myParagraph"
. - The
className
property is then used to change the class of the element from"oldClass"
to"newClass"
.