Difference between revisions of "DOM Changing elements"
Jump to navigation
Jump to search
(Created page with "<pre id='shellbody' data-qtp='DOM'> <div id='countries'> <div id='fr'> <div>France</div> <img src='flags/fr.gif'/> </div> <div id='fi'> <div>Finland</div> <img src='...") |
|||
| Line 1: | Line 1: | ||
< | <syntaxhighlight id='shellbody' data-qtp='DOM' lang=html> | ||
<div id='countries'> | <div id='countries'> | ||
<div id='fr'> | <div id='fr'> | ||
<div>France</div> | <div>France</div> | ||
| Line 9: | Line 9: | ||
<img src='flags/fi.gif'/> | <img src='flags/fi.gif'/> | ||
</div> | </div> | ||
</div> | </div> | ||
</ | </syntaxhighlight > | ||
==Create Content== | ==Create Content== | ||
<div class='qu'> | <div class='qu'> | ||
Revision as of 08:52, 7 September 2021
<div id='countries'>
<div id='fr'>
<div>France</div>
<img src='flags/fr.gif'/>
</div>
<div id='fi'>
<div>Finland</div>
<img src='flags/fi.gif'/>
</div>
</div>
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 an 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);