Difference between revisions of "DOM Creating content"

From ProgZoo
Jump to navigation Jump to search
(8 intermediate revisions by the same user not shown)
Line 4: Line 4:
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'''
<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>
*[[DOM div in div|More practice with this]]
</div>
</div>


==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 28:
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 34:
a.src = '/flags/fr.png';
a.src = '/flags/fr.png';
a.style = 'width:100px;border:solid;';
a.style = 'width:100px;border:solid;';
document.body.appendChild(a);
document.body.append(a);
</pre>
</pre>
</div>
</div>
Line 45: Line 46:
<pre class='usr'>
<pre class='usr'>
let a = document.createElement('div');
let a = document.createElement('div');
a.innerHTML = 'France, ';
a.innerHTML = 'Germany, ';
let b = document.createElement('i');
let b = document.createElement('i');
b.innerHTML = 'Paris';
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/fr.png';
c.src = '/flags/de.png';
c.style = 'width:100px';
c.style = 'width:100px';
</pre>
</pre>
Line 59: Line 60:
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 72: Line 73:
You can put more complex HTML into an element.
You can put more complex HTML into an element.
The backticks ` ` can span many lines.
The backticks ` ` can span many lines.
<div class='imper'>Make the flags bigger - you can set the height to 2ex</div>
<pre class='usr'>
<pre class='usr'>
let a = document.createElement('div');
let a = document.createElement('div');
Line 97: Line 99:
</pre>
</pre>
</div>
</div>


==Using functions==
==Using functions==

Revision as of 06:34, 11 September 2021




Create Content

You can create a div element an set the content.

We use the document method createElement and the DOM node method append

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