Add HTML elements

by dledle2

HTML

Important things to remember are probably:<br />
- Use document.createElement('elementtype'); to create a new element<br />
- Use parent.appendChild(element); to add your new element<br /><br />

<button id="add">Add</button>
<ol id="list">
    <li>Item</li>
</ol>
<div id="a">a</div>
<div id="b">b</div>
<div id="ab">ab
  <div>

JavaScript

function addKids() {
  a = document.createElement("img");
  a.src = 'https://i.stack.imgur.com/G2FO1.jpg?s=48&g=1';
    document.getElementById("a").appendChild(a);

  b = document.createElement("img");
  b.src = 'https://lh3.googleusercontent.com/-w_IWeYU4ynw/AAAAAAAAAAI/AAAAAAAAAF0/Xbzx7yhjooQ/photo.jpg?sz=48';
    document.getElementById("b").appendChild(b);

  var ab = document.getElementById("ab");
  ab.appendChild(a.cloneNode());
  ab.appendChild(b.cloneNode());
}

addKids();



var btnAdd = document.getElementById('add');
btnAdd.addEventListener("click", addElement, false);

function addElement()
{
    var olList = document.getElementById('list');
    var newListItem = document.createElement('li');
    newListItem.innerText = 'New Item';
    olList.appendChild(newListItem);
}