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>

Create Content

You can create a div element an set the content.

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

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

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

Find an element and change it

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

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