DOM Changing elements

 
 <div id='countries'> 
  <div id='fr'>
	<div>France</div>
	<img src='/flags/fr.gif'/>
  </div>
  <div id='fi'>
	<div>Finland</div>
	<img src='/flags/fi.gif'/>
  </div>
 </div>

In these examples the web page contains the following content.

<div id='countries'> 
 <div id='fr'>
   <div>France</div>
   <img src='/flags/fr.gif'/>
 </div>
 <div id='fi'>
   <div>Finland</div>
   <img src='/flags/fi.gif'/>
 </div>
</div>

1) Create Content

You can create a div element an set the content.

We use the document method createElement and the DOM node method append

Input

let e = document.getElementById('countries'); e.style.backgroundColor = 'pink';

xxxxxxxxxx

 

1

let e = document.getElementById('countries');

2

e.style.backgroundColor = 'pink';

3

​

Go reset

Output

let e = document.getElementById('countries');
e.style.backgroundColor = 'pink';

let e = document.getElementById('countries');
e.style.backgroundColor = 'silver';

2) Find an element and change it

Input

document.querySelector('img').style.width = '75px';

xxxxxxxxxx

 

1

document.querySelector('img').style.width = '75px';

2

​

Go reset

Output

document.querySelector('img').style.width = '75px';

document.querySelector('img').style.width = '50px';