Difference between revisions of "DOM Creating content"

From ProgZoo
Jump to navigation Jump to search
Line 39: Line 39:
==Create multiple elements==
==Create multiple elements==
<div class='qu'>
<div class='qu'>
You can add several elements to the document.body.
*You can add several elements to the document.body.
You can add elements to other elements.
*You can add elements to other elements.
*Change this code to match the model answer
*Can you see why the flag does not show?
<pre class='usr'>
<pre class='usr'>
let a = document.createElement('div');
let a = document.createElement('div');
Line 50: Line 52:
c.src = '/flags/fr.png';
c.src = '/flags/fr.png';
c.style = 'width:100px';
c.style = 'width:100px';
document.body.appendChild(c);
</pre>
</pre>
<pre class='ans'>
<pre class='ans'>
let a = document.createElement('img');
let a = document.createElement('div');
a.src = '/flags/fr.png';
a.innerHTML = 'Germany, ';
a.style = 'width:100px;border:solid;';
let b = document.createElement('i');
b.innerHTML = 'Berlin';
a.appendChild(b);
document.body.appendChild(a);
document.body.appendChild(a);
let c = document.createElement('img');
c.src = '/flags/de.png';
c.style = 'width:100px';
document.body.appendChild(c);
</pre>
</pre>
</div>
</div>

Revision as of 22:14, 10 August 2021


Create Content

You can create a div element an set the content.

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

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);

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.

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);

Create multiple elements

  • You can add several elements to the document.body.
  • You can add elements to other elements.
  • Change this code to match the model answer
  • Can you see why the flag does not show?
let a = document.createElement('div');
a.innerHTML = 'France';
let b = document.createElement('i');
b.innerHTML = 'Paris';
a.appendChild(b);
let c = document.createElement('img');
c.src = '/flags/fr.png';
c.style = 'width:100px';
let a = document.createElement('div');
a.innerHTML = 'Germany, ';
let b = document.createElement('i');
b.innerHTML = 'Berlin';
a.appendChild(b);
document.body.appendChild(a);
let c = document.createElement('img');
c.src = '/flags/de.png';
c.style = 'width:100px';
document.body.appendChild(c);