title: Make SVG icons appear on JS to do list item
body: <p>I am trying to create a to do list. Each item which is an li element has two SVG icons. At this point, when you type in text in the input field and click the plus button next to it, a li element appears but no SVG icons appear. How do i make the SVG icons appear each time I add a new item to the to do list?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*var removeSVG = svgElementFromString('&lt;svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve"&gt;&lt;polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 153.647,164.255 88.858,229.044 99.466,239.651 
     164.255,174.862 229.044,239.651 239.651,229.044 174.862,164.255 239.651,99.466   "/&gt; &lt;/svg&gt;');*/
  
  
  document.getElementById('button-plus').addEventListener('click', function(){
    var value = document.getElementById('input').value;
    if(value) addItem(value);
  });
  function addItem(text){
    var list = document.getElementById('to-do');
    
    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 = removeSVG;
    
    var complete = document.createElement('button');
    complete.classList.add('complete');
    //complete.innerHTML = completeSVG;
    
    buttons.appendChild(remove);
    buttons.appendChild(complete);
    item.appendChild(buttons);
  
    list.appendChild(item);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  header {
    width: 100%;
    height: 70px;
    background: rgb(162, 193, 60);
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    box-shadow: 0 0 5px rgb(159, 160, 155);
    padding: 0 10px 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  
  header input {
   appearance: none;
   text-indent: 10px;
   border-bottom-right-radius: 25px;
   border-top-right-radius: 25px;
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;
   width: 100%;
   background: rgb(233, 255, 170);
   height: 45px;
   font-family: Century Gothic;
   border: none;
   box-sizing: border-box;
   padding-right: 60px;
  }
  
  header button {
  position: absolute;
  right: 10px;
  top: 13.5px;
  height: 43px;
  width: 50px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  appearance: none;
  border: none;
  background: rgb(238, 255, 173);
  border-left: 2px solid rgb(162, 193, 60);
  cursor: pointer;
  }
  
  button svg {
  z-index: 6;
  position: absolute;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  right: 0;
  top: -1px;
  }/*
  .container{
    width: 100%;
    margin: auto;
    border: 1px solid black;
  }*/
   .to-do {
    width: 100%;
    float: left;
    list-style-type: none;
     box-sizing: border-box;
     padding: 0;
    /*border: 1px lid black;*/
  }
  .to-do li{
    width: 85%;
    background: white;
    box-shadow: 0 0 5px rgb(159, 160, 155, 0.5);
    min-height: 50px;
    margin: auto;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: Century Gothic;
    padding: 0 105px 0 25px;
    position: relative;
    margin-top: 25px;
    display: flex;
    align-items: center;
    
  }
  .to-do li .buttons{
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 100px;
    background: white;
  }
  .to-do li .buttons button{
    appearance: none;
    width: 47.5px;
    height: 50px;
    box-sizing: border-box;
    position: relative;
    background: white;
    border: none;
    cursor: pointer;
  }
  .to-do li .buttons button:last-of-type:before{
    content: '';
    width: 0.8px;
    height: 29px;
    background: gray;
    opacity: 0.4;
    float: left;
    margin-left: -6px;
  }/*
  .to-do li button:nth-child(1):hover .x-fill{
    fill: red;
    transition-duration: 0.3s;
  }
  .to-do li button:nth-child(2):hover .tick-fill{
    fill: orange;
    transition-duration: 0.3s;
  }*/
  .complete svg{
    fill: green;
  }
  .complete svg:hover{
    fill: orange;
    transition-duration: 0.3s;
  }
  .remove svg{
    fill: gray;
    opacity: 0.8;
  }
  .remove svg:hover{
    fill: red;
    opacity: 0.7;
    transition-duration: 0.3s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  
  &lt;title&gt;To do List App&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
    &lt;input type="text" placeholder="Next on my to do list is...." id="input"&gt;
    &lt;button id="button-plus"&gt;
   &lt;svg width="48" height="43" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"&gt;
    &lt;rect fill="#0186b2" height="28" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" width="4" x="19.5" y="8.5"/&gt;
    &lt;rect fill="#47bcbc" height="3" id="svg_2" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0" stroke-width="5" width="28" x="7.5" y="20.5"/&gt;
  &lt;/svg&gt;
     
      &lt;/svg&gt;
    &lt;/button&gt;
  &lt;/header&gt;
    &lt;div class="container"&gt;
  &lt;ul id="to-do" class="to-do"&gt;
    &lt;li&gt;First to do &lt;div class="buttons"&gt;
      &lt;button class="remove"&gt;&lt;!--&lt;svg width="45" height="50" id="delete-button" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"&gt;
      &lt;rect fill="gray" height="28.44763" class="x-fill" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(39.2894 22.2822 26.8218)" width="1.49252" x="21.53592" y="12.59797"/&gt;
    &lt;rect fill="gray" height="30.65491" class="x-fill" id="svg_2" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(-45.1764 22.3317 26.664)" width="1.70493" x="21.47928" y="11.33651"/&gt;
  &lt;/svg&gt;--&gt;
       &lt;svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve"&gt;
    &lt;polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 153.647,164.255 88.858,229.044 99.466,239.651 
     164.255,174.862 229.044,239.651 239.651,229.044 174.862,164.255 239.651,99.466   "/&gt;
        &lt;/svg&gt;
      &lt;/button&gt;
      &lt;button class="complete"&gt;&lt;!--&lt;svg width="45" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"&gt;
     &lt;rect fill="#21b221" height="28.44763" class="tick-fill" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(39.2894 24.2822 25.8218)" width="1.49252" x="23.53592" y="11.59797"/&gt;
    &lt;rect fill="#21b221" height="12.26151" class="tick-fill" id="svg_2" stroke="#000000" stroke-opacity="0" stroke-width="5" transform="rotate(-45.1764 11.8548 33.147)" width="1.70493" x="11.00232" y="27.0162"/&gt;
  &lt;/svg&gt;--&gt;
      &lt;svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"&gt;
   
   &lt;path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406
    l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411
    C39.251,14.885,38.62,14.922,38.252,15.336z"/&gt;
    &lt;/svg&gt;
      &lt;/button&gt;
      &lt;/div&gt;&lt;/li&gt;
    &lt;/ul&gt;
      &lt;ul id="completed" class="completed"&gt;
        
      &lt;/ul&gt;
    &lt;/div&gt;
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>