Difference between revisions of "DOM Creating content"

Revision as of 22:59, 10 August 2021

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

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.appendChild(a);

let a = document.createElement('img');
a.src = '/flags/fr.png';
a.style = 'width:100px;border:solid;';
document.body.appendChild(a);

@@ Line 20: / Line 20: @@
 <div class='qu'>
 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.
-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');
@@ Line 30: / Line 32: @@
 let a = document.createElement('img');
 a.src = '/flags/fr.png';
+a.style = 'width:100px;border:solid;';
 document.body.appendChild(a);
-let e = document.createElement('div');
-e.innerHTML = 'France';
-document.body.appendChild(e);
 </pre>
 </div>