Difference between revisions of "DOM Creating content"
Jump to navigation
Jump to search
Tag: Reverted |
|||
(25 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<pre id=' | <pre id='shellbody' data-qtp='DOM'></pre> | ||
==Create Content== | |||
</pre> | |||
== | |||
<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 ''' | 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. | 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( | document.body.append(e); | ||
</pre> | |||
*[[DOM div in div|More practice with this]] | |||
</div> | |||
==Create img== | |||
<div class='qu'> | |||
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. | |||
<pre class='usr'> | |||
let a = document.createElement('img'); | |||
a.src = '/flags/fr.png'; | |||
document.body.append(a); | |||
</pre> | |||
<pre class='ans'> | |||
let a = document.createElement('img'); | |||
a.src = '/flags/fr.png'; | |||
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); | |||
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> | </pre> | ||
</div> | </div> |
Revision as of 07: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');