Difference between revisions of "DOM Creating content"

From ProgZoo
Jump to navigation Jump to search
Line 1: Line 1:
<pre id='shellbody' data-qtp='DOM'></pre>
<pre id='shellbody' data-qtp='DOM'></pre>
==Change 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.
Line 13: Line 13:
let e = document.createElement('div');
let e = document.createElement('div');
e.innerHTML = 'Hello world';
e.innerHTML = 'Hello world';
document.body.appendChild(e);
</pre>
</div>
==Create img==
<div class='qu'>
You can create a '''img''' element an set the '''src'''.
We use the document method '''createElement''' and the DOM node method '''appendChild''' and the node property '''innerHTML'''
<pre class='usr'>
let a = document.createElement('img');
a.src = '/flags/fr.png';
document.body.appendChild(a);
</pre>
<pre class='ans'>
let a = document.createElement('img');
a.src = '/flags/fr.png';
document.body.appendChild(a);
let e = document.createElement('div');
e.innerHTML = 'France';
document.body.appendChild(e);
document.body.appendChild(e);
</pre>
</pre>
</div>
</div>

Revision as of 21:47, 10 August 2021


Create Content

You can create a div element an set the content.

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

let e = document.createElement('div');
e.innerHTML = 'Hello';
document.body.appendChild(e);
let e = document.createElement('div');
e.innerHTML = 'Hello world';
document.body.appendChild(e);

Create img

You can create a img element an set the src.

We use the document method createElement and the DOM node method appendChild and the node property innerHTML

let a = document.createElement('img');
a.src = '/flags/fr.png';
document.body.appendChild(a);
let a = document.createElement('img');
a.src = '/flags/fr.png';
document.body.appendChild(a);
let e = document.createElement('div');
e.innerHTML = 'France';
document.body.appendChild(e);