Difference between revisions of "DOM Changing elements"

From ProgZoo
Jump to navigation Jump to search
Line 1: Line 1:
<syntaxhighlight  id='shellbody' data-qtp='DOM' lang=html>
<textarea id='shellbody' data-qtp='DOM' lang=html>
  <div id='countries'>
  <div id='countries'>
   <div id='fr'>
   <div id='fr'>
Line 10: Line 10:
   </div>
   </div>
  </div>
  </div>
</syntaxhighlight >
</textarea>
==Create Content==
==Create Content==
<div class='qu'>
<div class='qu'>

Revision as of 08:55, 7 September 2021

<textarea id='shellbody' data-qtp='DOM' lang=html>

France

<img src='flags/fr.gif'/>

Finland

<img src='flags/fi.gif'/>

</textarea>

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