Difference between revisions of "DOM Creating content"

From ProgZoo
Jump to navigation Jump to search
(30 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'>
You can create a div element an set the content.
You can create a div element an set the content.


We use the document method '''createElement''' and the DOM node method '''appendChild'''
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');
e.innerHTML = 'Hello';
e.innerHTML = 'Hello';
document.body.appendChild(e);
document.body.append(e);
</pre>
</pre>
<pre class='ans'>
<pre class='ans'>
let e = document.createElement('div');
let e = document.createElement('div');
e.innerHTML = 'Hello world';
e.innerHTML = 'Hello world';
document.body.appendChild(e);
document.body.append(e);
</pre>
</pre>
</div>
</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 27: Line 30:
let a = document.createElement('img');
let a = document.createElement('img');
a.src = '/flags/fr.png';
a.src = '/flags/fr.png';
document.body.appendChild(a);
document.body.append(a);
</pre>
</pre>
<pre class='ans'>
<pre class='ans'>
Line 33: Line 36:
a.src = '/flags/fr.png';
a.src = '/flags/fr.png';
a.style = 'width:100px;border:solid;';
a.style = 'width:100px;border:solid;';
document.body.append(a);
</pre>
</div>
==Create multiple elements==
<div class='qu'>
*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?
<pre class='usr'>
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';
</pre>
<pre class='ans'>
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);
</pre>
</div>
==Setting complex innerHTML==
<div class='qu'>
You can put more complex HTML into an element.
The backticks ` ` can span many lines.
<div class='imper'>Make the flags bigger - you can set the height to 2ex</div>
<pre class='usr'>
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);
</pre>
<pre class='ans'>
let a = document.createElement('div');
a.innerHTML = `
  <img src='/flags/gr.png' style='height:2ex'>
  Greece <i>Athens</i>`;
document.body.appendChild(a);
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);
</pre>
</div>
==Using functions==
<div class='qu'>
* 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.
<pre class='usr'>
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');
</pre>
<pre class='ans'>
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');
</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);
}