DOM Creating content

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'

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

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.

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

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

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

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

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.

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

Write the schedule

We want to show the start time and end time for each event.

function addSchedule(name, timeStart, timeEnd){
  let a = document.createElement('div');
  a.innerHTML = `${name}`;
  document.body.appendChild(a);
}

addSchedule('Lecture',  '13:00', '14:00');
addSchedule('Tutorial', '14:00', '15:30');
addSchedule('Lecture',  '15:30', '16:00');

function addSchedule(name, timeStart, timeEnd){
  let a = document.createElement('div');
  a.innerHTML = `${name} ${timeStart} ${timeEnd}`;
  document.body.appendChild(a);
}

addSchedule('Lecture',  '13:00', '14:00');
addSchedule('Tutorial', '14:00', '15:30');
addSchedule('Lecture',  '15:30', '16:00');

Write the schedule with Edinburgh time

You can use this function to calculate Edinburgh time:

function edinburgh(t){
  let hm = t.split(':');
  let m = 60*parseInt(hm[0])+parseInt(hm[1]);
  let e = m - 60*5.5;
  return (Math.floor(e/60).toString().padStart(2,'0'))+':'+
                   ((e%60).toString().padStart(2,'0'));
}

The times shown are in the Yangon time zone. Show the Edinburgh time in brackets. Edinburgh time is 5.5 hours earlier than Yangon time.

function edinburgh(t){
  let hm = t.split(':');
  let m = 60*parseInt(hm[0])+parseInt(hm[1]);
  let e = m - 60*5.5;
  return (Math.floor(e/60).toString().padStart(2,'0'))+':'+
                   ((e%60).toString().padStart(2,'0'));
}

function addSchedule(name, timeStart, timeEnd){
  let a = document.createElement('div');
  a.innerHTML = `${name} ${timeStart} ${edinburgh(timeStart)}`;
  document.body.appendChild(a);
}

addSchedule('Lecture',  '13:00', '14:00');
addSchedule('Tutorial', '14:00', '15:30');
addSchedule('Lecture',  '15:30', '16:00');

function edinburgh(t){
  let hm = t.split(':');
  let m = 60*parseInt(hm[0])+parseInt(hm[1]);
  let e = m - 60*5.5;
  return (Math.floor(e/60).toString().padStart(2,'0'))+':'+
                   ((e%60).toString().padStart(2,'0'));
}

function addSchedule(name, timeStart, timeEnd){
  let a = document.createElement('div');
  a.innerHTML = `${name} ${timeStart} (${edinburgh(timeStart)}) ${timeEnd} (${edinburgh(timeEnd)})`;
  document.body.appendChild(a);
}

addSchedule('Lecture',  '13:00', '14:00');
addSchedule('Tutorial', '14:00', '15:30');
addSchedule('Lecture',  '15:30', '16:00');

Using a loop

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

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

Radio buttons

• You can create HTML elements such as a radio button:

 <label><input type=radio name='country'>France</label>

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 d = document.createElement('div');
  d.innerHTML = c.name;
}

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 = `
    <label><input type=radio name='country'>${c.name}</label>`;
  document.body.appendChild(a);
}

Radio buttons with images

• Add a flag to each radio button:

 <label><input type=radio name='country'>France</label>

let cl = [
  {name:'France', capital:'Paris', flag:'fr'},
  {name:'Italy', capital:'Rome',   flag:'it'},
  {name:'Germany', capital:'Berlin', flag:'de'}
];

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 = `
    <label><input type=radio name='country'><img style='height:20px' src=/flags/${c.flag}.png></label>`;
  document.body.appendChild(a);
}