Difference between revisions of "DOM Changing elements"

From ProgZoo
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:
<pre id='shellbody' data-qtp='DOM'>
<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>
</pre>
</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);