DOM Changing elements

From ProgZoo
Revision as of 08:57, 7 September 2021 by Andr3w (talk | contribs)
Jump to navigation Jump to search

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

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