DOM Creating content

1) Create Content

You can create a div element an set the content.

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

Input

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

xxxxxxxxxx

 

1

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

2

e.innerHTML = 'Hello';

3

document.body.appendChild(e);

4

​

Go reset

Output

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

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

xxxxxxxxxx

 

1

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

2

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

3

document.body.appendChild(a);

4

​

Go reset

Output

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

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