Difference between revisions of "DOM Creating content"

From ProgZoo
Jump to navigation Jump to search
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre id='shellbody' data-qtp='DOM'></pre>
<pre id='shellbody' data-qtp='DOM'></pre>
==Create Content==
==Create Content==
<div class='qu'>
<div class='qu'>
Line 5: Line 6:


We use the document method '''createElement''' and the DOM node method '''append'''
We use the document method '''createElement''' and the DOM node method '''append'''
<div class='imper'>Change the code so that it says 'Hello world'</div>
<pre class='usr'>
<pre class='usr'>
let e = document.createElement('div');
let e = document.createElement('div');
Line 19: Line 22:
==Create img==
==Create img==
<div class='qu'>
<div class='qu'>
You can create a '''img''' element an set the '''src'''.
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'''.
In this example you must set the '''src''' and the '''style''' of the new element '''a'''.
  a.style = 'width:100px;border:solid;';
  a.style = 'width:100px;border:solid;';
Line 49: Line 52:
b.innerHTML = 'Berlin';
b.innerHTML = 'Berlin';
a.appendChild(b);
a.appendChild(b);
document.body.appendChild(a);
document.body.append(a);
let c = document.createElement('img');
let c = document.createElement('img');
c.src = '/flags/de.png';
c.src = '/flags/de.png';
Line 59: Line 62:
let b = document.createElement('i');
let b = document.createElement('i');
b.innerHTML = 'Berlin';
b.innerHTML = 'Berlin';
a.appendChild(b);
a.append(b);
document.body.appendChild(a);
document.body.appendChild(a);
let c = document.createElement('img');
let c = document.createElement('img');
c.src = '/flags/de.png';
c.src = '/flags/de.png';
c.style = 'width:100px';
c.style = 'width:100px';
document.body.appendChild(c);
document.body.append(c);
</pre>
</pre>
</div>
</div>
Line 131: Line 134:
addCountryDiv('Japan', 'Tokyo', 'jp');
addCountryDiv('Japan', 'Tokyo', 'jp');
addCountryDiv('South Korea', 'Seoul', 'kr');
addCountryDiv('South Korea', 'Seoul', 'kr');
</pre>
</div>
==Using a loop==
<div class='qu'>
* Another way to avoid copying chunks of code is to use a loop.
<pre class='usr'>
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);
}
</pre>
<pre class='ans'>
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);
}
</pre>
</pre>
</div>
</div>

Revision as of 09:11, 22 January 2022




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

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