Difference between revisions of "DOM Changing elements"

From ProgZoo
Jump to navigation Jump to search
Line 37: Line 37:
</div>
</div>


==Create img==
==Find an element and change it==
<div class='qu'>
<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.


<pre class='usr'>
<pre class='usr'>
let a = document.createElement('img');
document.querySelector('img').style.width = '75px';
a.src = '/flags/fr.png';
document.body.append(a);
</pre>
</pre>
<pre class='ans'>
<pre class='ans'>
document.querySelector('img').style.width = '50px';
document.querySelector('img').style.width = '50px';
})
</pre>
</pre>
</div>
</div>

Revision as of 11:21, 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>

In these examples the web page contains the following content.

<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.getElementById('countries');
e.style.background = 'pink';
let e = document.getElementById('countries');
e.style.background = 'silver';

Find an element and change it


document.querySelector('img').style.width = '75px';
document.querySelector('img').style.width = '50px';