Dom manipulation to add an image

week_4/examples/dommanipulation.html

@@ -9,10 +9,11 @@
 <input type="button" onclick="recolor('testing_ground')" value="Colorize!"></input>
 
 <ol id="mylist">
-    <li>First item</li>
 </ol>
 
-<button onclick="addListItem();">Add List Item</button>
+<input id="imageurl"></input>
+
+<button onclick="addListItem();">Add Image</button>
 
 
 <script>
@@ -24,12 +25,14 @@
     function addListItem() {
         var list = document.body.querySelector("#mylist");
 
-        var newitem = document.createElement("li");
-        var newcontent = document.createTextNode("New element!");
+        var li = document.createElement("li");
+        var img = document.createElement("img");
+        var url = document.body.querySelector("#imageurl").value;
 
-        newitem.appendChild(newcontent);
+        img.setAttribute("src", url);
 
-        list.appendChild(newitem);
+        li.appendChild(img);
+        list.appendChild(li);
     }
 </script>