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 append

Change the code so that it says 'Hello world'

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

3) 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?

Input

let a = document.createElement('div'); a.innerHTML = 'Germany, '; let b = document.createElement('i'); b.innerHTML = 'Berlin'; a.appendChild(b); document.body.append(a); let c = document.createElement('img'); c.src = '/flags/de.png'; c.style = 'width:100px';

xxxxxxxxxx

 

1

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

2

a.innerHTML = 'Germany, ';

3

let b = document.createElement('i');

4

b.innerHTML = 'Berlin';

5

a.appendChild(b);

6

document.body.append(a);

7

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

8

c.src = '/flags/de.png';

9

c.style = 'width:100px';

10

​

Go reset

Output

let a = document.createElement('div');
a.innerHTML = 'Germany, ';
let b = document.createElement('i');
b.innerHTML = 'Berlin';
a.appendChild(b);
document.body.append(a);
let c = document.createElement('img');
c.src = '/flags/de.png';
c.style = 'width:100px';

let a = document.createElement('div');
a.innerHTML = 'Germany, ';
let b = document.createElement('i');
b.innerHTML = 'Berlin';
a.append(b);
document.body.appendChild(a);
let c = document.createElement('img');
c.src = '/flags/de.png';
c.style = 'width:100px';
document.body.append(c);

4) Setting complex innerHTML

You can put more complex HTML into an element. The backticks ` ` can span many lines.

Make the flags bigger - you can set the height to 2ex

Input

let a = document.createElement('div'); a.innerHTML = ` <img src='/flags/gr.png' style='height:1ex'> Greece <i>Athens</i>`; document.body.appendChild(a); let b = document.createElement('div'); b.innerHTML = ` <img src='/flags/it.png' style='height:1ex'> Italy <i>Rome</i>`; document.body.appendChild(b);

xxxxxxxxxx

 

1

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

2

a.innerHTML = `

3

  <img src='/flags/gr.png' style='height:1ex'>

4

  Greece <i>Athens</i>`;

5

document.body.appendChild(a);

6

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

7

b.innerHTML = `

8

  <img src='/flags/it.png' style='height:1ex'>

9

  Italy <i>Rome</i>`;

10

document.body.appendChild(b);

11

​

Go reset

Output

let a = document.createElement('div');
a.innerHTML = `
  <img src='/flags/gr.png' style='height:1ex'>
  Greece <i>Athens</i>`;
document.body.appendChild(a);
let b = document.createElement('div');
b.innerHTML = `
  <img src='/flags/it.png' style='height:1ex'>
  Italy <i>Rome</i>`;
document.body.appendChild(b);

let a = document.createElement('div');
a.innerHTML = `
  <img src='/flags/gr.png' style='height:2ex'>
  Greece <i>Athens</i>`;
document.body.appendChild(a);
let b = document.createElement('div');
b.innerHTML = `
  <img src='/flags/it.png' style='height:2ex'>
  Italy <i>Rome</i>`;
document.body.appendChild(b);

5) Using functions

• You should avoid copying chunks of code.
• A well chosen function can help avoid that.
• Notice how string interpolation allows you to include variables in the string.

Input

function addCountryDiv(name, capital, flag){ let a = document.createElement('div'); a.innerHTML = ` <img src='/flags/${flag}.png' style='height:2ex;'> ${name}`; document.body.appendChild(a); } addCountryDiv('China', 'Beijing', 'cn'); addCountryDiv('Japan', 'Tokyo', 'jp'); addCountryDiv('South Korea', 'Seoul', 'kr');

xxxxxxxxxx

 

1

function addCountryDiv(name, capital, flag){

2

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

3

  a.innerHTML = `

4

    <img src='/flags/${flag}.png'

5

         style='height:2ex;'>

6

    ${name}`;

7

  document.body.appendChild(a);

8

}

9

​

10

addCountryDiv('China', 'Beijing', 'cn');

11

addCountryDiv('Japan', 'Tokyo', 'jp');

12

addCountryDiv('South Korea', 'Seoul', 'kr');

13

​

Go reset

Output

function addCountryDiv(name, capital, flag){
  let a = document.createElement('div');
  a.innerHTML = `
    <img src='/flags/${flag}.png'
         style='height:2ex;'>
    ${name}`;
  document.body.appendChild(a);
}

addCountryDiv('China', 'Beijing', 'cn');
addCountryDiv('Japan', 'Tokyo', 'jp');
addCountryDiv('South Korea', 'Seoul', 'kr');

function addCountryDiv(name, capital, flag){
  let a = document.createElement('div');
  a.innerHTML = `
    <img src='/flags/${flag}.png'
         style='height:2ex;border:solid'>
    ${name} <i>${capital}</i>`;
  document.body.appendChild(a);
}

addCountryDiv('China', 'Beijing', 'cn');
addCountryDiv('Japan', 'Tokyo', 'jp');
addCountryDiv('South Korea', 'Seoul', 'kr');

6) Using a loop

• Another way to avoid copying chunks of code is to use a loop.

Input

let cl = [ {name:'France', capital:'Paris', flag:'fr'}, {name:'Italy', capital:'Rome', flag:'it'}, {name:'Germany', capital:'Berlin', flag:'de'} ]; for(let c of cl){ let a = document.createElement('div'); a.innerHTML = ` ${c.name}`; document.body.appendChild(a); }

xxxxxxxxxx

 

1

let cl = [

2

  {name:'France', capital:'Paris', flag:'fr'},

3

  {name:'Italy', capital:'Rome',   flag:'it'},

4

  {name:'Germany', capital:'Berlin', flag:'de'}

5

];

6

for(let c of cl){

7

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

8

  a.innerHTML = `

9

    ${c.name}`;

10

  document.body.appendChild(a);

11

}

12

​

Go reset

Output

let cl = [
  {name:'France', capital:'Paris', flag:'fr'},
  {name:'Italy', capital:'Rome',   flag:'it'},
  {name:'Germany', capital:'Berlin', flag:'de'}
];
for(let c of cl){
  let a = document.createElement('div');
  a.innerHTML = `
    ${c.name}`;
  document.body.appendChild(a);
}

let cl = [{name:'France', capital:'Paris', flag:'fr'},
          {name:'Italy', capital:'Rome',   flag:'it'},
          {name:'Germany', capital:'Berlin', flag:'de'}];
for(let c of cl){
  let a = document.createElement('div');
  a.innerHTML = `
    <img src='/flags/${c.flag}.png'
         style='height:2ex;border:solid'>
    ${c.name} <i>${c.capital}</i>`;
  document.body.appendChild(a);
}