Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Changing the Contents of HTML Elements | DOM and HTML Manipulation
HTML & JavaScript Interactivity for Beginners

book
Changing the Contents of HTML Elements

In this chapter, you'll find out how to change the contents of HTML elements using the innerHTML property. Then you'll find out how to get and change the attribute values of HTML elements. But first, let's start with how to find HTML elements.

Finding and Changing HTML Elements

By now, you have three methods from the last chapter, and they're :

  • Get elements by id;

  • Get elements by tag name;

  • Get elements by class name.

In this chapter, you'll learn two more methods:

  • Get elements by CSS selectors;

  • Get elements by HTML object collections.

Let's turn into coding examples to see how they operate:

HTML Elements by id

In this coding example, you'll find the <h2> tag by id and change its contents.

html

index.html

copy
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 id = 'main-heading'>Changing the Original Contents of the H2 element.</h1>
<h2 id = 'sub-heading'>This is the Original Subheading.</h2>
<script type = 'text/javascript'>
document.getElementById('sub-heading').innerHTML = 'This is the updated Subheading.';
</script>
</body>
</html>

HTML Elements by Tag Name

In this coding example, you'll find all the <h2> tags by tag name and display the first element's content on a fresh <p> tag with the id 'demo'.

html

index.html

copy
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 id = 'main-heading'>Displaying the contents of the HTML element</h1>
<h2>I am the subheading 1</h2>
<h2>I am the subheading 2</h2>
<p id = 'demo'></p>
<script type = 'text/javascript'>
const elements = document.getElementsByTagName('h2');
document.getElementById('demo').innerHTML = 'The content of the first subheading tag is : ' + elements[0].innerHTML;
</script>
</body>
</html>

HTML Elements by Class Name

There are HTML elements with class attributes. So the below program grabs them and displays one of their content in a fresh <p> tag with the id 'demo'.

html

index.html

copy
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 id = 'main-heading'>Displaying the contents of the HTML element</h1>
<h2 class = 'sub-heading'>I am the subheading 1</h2>
<h2 class = 'sub-heading'>I am the subheading 2</h2>
<h2 class = 'sub-heading'>I am the subheading 3</h2>
<h2>I'm the subheading 2</h2>
<p id = 'demo'></p>
<script type = 'text/javascript'>
const elements = document.getElementsByClassName('sub-heading');
document.getElementById('demo').innerHTML = 'The content of the 2nd header element is : ' + elements[1].innerHTML;
</script>
</body>
</html>

HTML Elements by CSS Selectors

In this example, first, we'll find the paragraphs under <div> element with id 'main-content' using document.querySelectorAll method. Then we'll change the text of the first paragraph.

html

index.html

copy
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Changing the contents of the first P element.</h1>
<div id='main-content'>
<p>Hello World. Welcome to Coding</p>
<p>You made it look easy</p>
</div>
<script type='text/javascript'>
const e = document.querySelectorAll('div#main-content p');
e[0].innerHTML = 'Manipulating the DOM has never been easier.';
</script>
</body>
</html>

HTML object collections

In a web page or an application, there can be a collection of HTML elements, such as forms which houses a group of form controls. In the example below, we grab the value attribute of all the form elements.

html

index.html

copy
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Finding the Values of Form HTML Elements</h1>
<form id = 'registration-form' action=''> First Name: <input type = 'text' name = 'fname' value = 'Brian'>
<br> Last name: <input type = 'text' name = 'lname' value = 'McMillan'>
<br>
<input type = 'submit' value = 'Submit'>
</form>
<p>Here are the values of each form element:</p>
<p id = 'demo'></p>
<script type = 'text/javascript'>
const y = document.forms['registration-form'];
let text = '';
for (i = 0; i < y.length; i++) {
text += y.elements[i].value + '<br>';
}
document.getElementById('demo').innerHTML = text;
</script>
</body>
</html>

1. How do you change the content of
Some Text
to : 'I have changed'.

2. How do you change the text content of the 2nd and 3rd elements below using JavaScript?

question mark

How do you change the content of

Some Text
to : 'I have changed'.

Select the correct answer

question mark

How do you change the text content of the 2nd and 3rd elements below using JavaScript?

<h2 class = 'h2-styles'>Element 1</h2>
<h2 class = 'h2-styles'>Element 2</h2>
<h2 class = 'h2-styles'>Element 3</h2>

Const x = document.getElementsByClassName('h2-styles');

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 2

Demandez à l'IA

expand
ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

We use cookies to make your experience better!
some-alt