0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The element.children DOM property returns a collection of child, that is, nested, DOM elements.</p>
1
<p>The element.children DOM property returns a collection of child, that is, nested, DOM elements.</p>
2
<p>Creating an element and adding it to the DOM tree:</p>
2
<p>Creating an element and adding it to the DOM tree:</p>
3
var list = document.querySelector('.cards'); // Creating a new element var card = document.createElement('li'); card.classList.add('card'); // After calling this method, // a new element is rendered on page list.appendChild(card);<p>Here’s what happens with the markup after calling appendChild:</p>
3
var list = document.querySelector('.cards'); // Creating a new element var card = document.createElement('li'); card.classList.add('card'); // After calling this method, // a new element is rendered on page list.appendChild(card);<p>Here’s what happens with the markup after calling appendChild:</p>
4
<!-- Initial markup state --> <ul class="cards"> <li class="card">Existing element</li> </ul> <!-- State after calling appendChild --> <ul class="cards"> <li class="card">Existing element</li> <li class="card">Added element</li> </ul><p>Working with the text content of the element:</p>
4
<!-- Initial markup state --> <ul class="cards"> <li class="card">Existing element</li> </ul> <!-- State after calling appendChild --> <ul class="cards"> <li class="card">Existing element</li> <li class="card">Added element</li> </ul><p>Working with the text content of the element:</p>
5
// HTML <p>I’m a <em>text element</em>.</p> // JS var p = document.querySelector('p'); console.log(p.textContent); // Logs 'I’m a text element.' p.textContent = 'Now I have new contents.'; console.log(p.textContent); // Logs 'Now I have new contents.' // In HTML, the tag content will change <p>Now I have new contents.</p><p>Working with images:</p>
5
// HTML <p>I’m a <em>text element</em>.</p> // JS var p = document.querySelector('p'); console.log(p.textContent); // Logs 'I’m a text element.' p.textContent = 'Now I have new contents.'; console.log(p.textContent); // Logs 'Now I have new contents.' // In HTML, the tag content will change <p>Now I have new contents.</p><p>Working with images:</p>
6
// Creating an image var picture = document.createElement('img'); // Adding picture address picture.src = 'images/picture.jpg'; // Adding alternative text picture.alt = 'Unsinkable selfie stick'; // Adding the image to the end of the parent element element.appendChild(picture);<a>Continue</a>
6
// Creating an image var picture = document.createElement('img'); // Adding picture address picture.src = 'images/picture.jpg'; // Adding alternative text picture.alt = 'Unsinkable selfie stick'; // Adding the image to the end of the parent element element.appendChild(picture);<a>Continue</a>