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>

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.createElement('div'); e.innerHTML = 'Hello'; document.body.append(e);

xxxxxxxxxx

 

1

let e = document.createElement('div');

2

e.innerHTML = 'Hello';

3

document.body.append(e);

4

​

Go reset

Output

let e = document.createElement('div');
e.innerHTML = 'Hello';
document.body.append(e);

let e = document.createElement('div');
e.innerHTML = 'Hello world';
document.body.append(e);

2) Create img

You can create a img element an set the src. In this example you must set the src and the style of the new element a.

a.style = 'width:100px;border:solid;';

These are CSS properties.

Input

let a = document.createElement('img'); a.src = '/flags/fr.png'; document.body.append(a);

xxxxxxxxxx

 

1

let a = document.createElement('img');

2

a.src = '/flags/fr.png';

3

document.body.append(a);

4

​

Go reset

Output

let a = document.createElement('img');
a.src = '/flags/fr.png';
document.body.append(a);

let a = document.createElement('img');
a.src = '/flags/fr.png';
a.style = 'width:100px;border:solid;';
document.body.append(a);