DOM Creating content

From ProgZoo
Jump to navigation Jump to search 




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

 
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

 
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

 
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

 
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

 
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) Write the schedule


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





Input

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





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





Input

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





8) Using a loop




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


Input

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






9) Radio buttons




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


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



Input

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






10) Radio buttons with images




  • Add a flag to each radio button:


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



Input

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












Retrieved from "https://progzoo.net/index.php?title=DOM_Creating_content&oldid=1109"