Q:

assigning  element as a value for a javascriptvariable

I am creating a to do list app with Javascript and I want to use a .png image to show a delete and complete icon. I created two variables for the images and used <img src="images/complete.png"  height="30"> as the value of the variables. However  when I load on the browser the images do not show.
Snapshot of app

var image1 = '<img src="images/deleteicon.png"  height="30" >';
var image2 = '<img src="images/complete.png"  height="30" >';

document.getElementById('add').addEventListener('click', function(){
  var value = document.getElementById('item').value;
  if(value){
    addItemToDo(value);
  }
})

function addItemToDo(text){
  var list = document.getElementById('todo');

  var item = document.createElement("li");
  item.innerText = text;

  var buttons = document.createElement("div");
  buttons.classList.add("buttons");

  var remove = document.createElement("button");
  remove.classList.add("remove");
  remove.innerHtml = image1;

  var complete = document.createElement("button");
  complete.classList.add("complete");
  complete.innerHtml = image2;

  buttons.appendChild(remove);
  buttons.appendChild(complete);
  item.appendChild(buttons);
  list.insertBefore(item,  list.childNodes[0]);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>To Do List</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <link type="text/css" href="Css/style.css" rel="stylesheet">
  </head>
  <body>
    <header>
      <input placeholder="Enter a task" id="item">
      <button type="button" ><img src="images/add.png" alt="Add" height="30" id="add"></button>
   </header>
   <div class="container">
     <ul class="todo" id="todo">
      <li>
         This is an Item
         <div class="buttons">
           <button class="remove" ><img src="images/deleteicon.png" alt="Add" height="30" id=""></button>
           <button class="complete"><img src="images/complete.png" alt="Add" height="30" id=""></button>
         </div>
       </li>



     </ul>

   </div>
   <script type="text/javascript" src="Js/main.js">

   </script>
  </body>
</html>

A:

However when I load on the browser the images do not show.

It is because you are trying to do it the wrong way. The idea here is to create html element and then assign src attribute to it as @Lucky Soni has shown. However, I would like to improve his solution. Notice, that the image can be huge or some network issues may occur. It might significantly delay image loading and if you don't handle this situation properly, your users are likely to see the browsers' default broken image icon or the image itself slowly loading into the page. To handle this situation you can use onload event for <img> like this:

function loadImage(elem, imgPath, callback) {
    var newImg = new Image();
    newImg.onload = function() {
        // insert it into the page. this is equal to newImg - our image element
        elem.appendChild(this); 
        // you can do something else passing down image or element to a callback function
        callback(this); 
    }
    newImg.src = imgPath;
    newImg.classList.add("img");
}

var elem = document.getElementById('test');
var imgPath = 'http://rcysl.com/wp-content/uploads/2017/02/Pics-Of-Nature-HD-.jpg';

loadImage(elem, imgPath, otherfunction);

function otherfunction(param) {
    console.log('Some action with ' + param);
}
.img {
    width: 50%;
    border: 1px solid orange;
    display: block;
}
<div id="test">My image:</div>

The above is very simple example based on callbacks. You might want to use Jquery's Deferred object or native JS Promise object to load images asynchronously and then doing some things when the images are done.

