Вставить HTML код в ячейку с помощью Javascript

Доброго времени суток, прошу, помогите решить проблему, у меня есть скрипт, который берет данные из этих инпутов:

<form class='form js-form' id="average">
                <h2 class="form-title"> Добавить новый контакт </h2>
                <div class="form-group">
          <label class='form-label' for='form-link-input'>Имя:</label>
          <input class='form-input form-name' name="form-name" id="form-name" type='text' value="" pattern="[A-Za-zА-Яа-яЁё][A-Za-zА-Яа-яЁё0-9]*?([-_][A-Za-zА-Яа-яЁё0-9]+){0,2}" required/>
          <label class='form-label' for='form-link-input'>Фамилия:</label>
          <input class='form-input form-surname' name="form-surname" id="form-surname" type='text' value="" pattern="[A-Za-zА-Яа-яЁё][A-Za-zА-Яа-яЁё0-9]*?([-_][A-Za-zА-Яа-яЁё0-9]+){0,2}" required/>
                </div>
                <div class="form-group">
          <label class='form-label' for='form-link-input'>Email:</label>
          <input class='form-input form-email' name="form=email" id="form-email" type='email' value="" required/>
                </div>
                <div class="form-group">
          <label class='form-label' for='form-link-input'>Телефон:</label>
          <input class='form-input form-phone' name="form-phone" id="form-phone" type='number' value="" required/>
                </div>
      <input type="submit" class="js-submit btn btn-primary" id="add">Принять</input>
                <button type="reset" class="js-cancel btn btn-danger">Отменить</button>
    </form>

И на их основе заполняет эту таблицу, создавая новые строки:

<table class="table table-striped" id="mytable">
              <thead>
                <tr role="row">
                  <th class="delete-row"></th>
                  <th>Имя</th>
                  <th>Фамилия</th>
                  <th>Email</th>
                  <th>Телефон</th>
                </tr>
              </thead>
              <tbody id="contact-list">
                <tr class="contact">
                  <td class="delete-row"><span class="glyphicon glyphicon-remove" onclick="deleteRow(this)"></span></td>
                  <td>Григорий</td>
                  <td>Петров</td>
                  <td>petrov@mail.ru</td>
                  <td>88005553535</td>
                </tr>
                <tr class="contact">
                  <td class="delete-row"><span class="glyphicon glyphicon-remove" onclick="deleteRow(this)"></span></td>
                  <td>Вася</td>
                  <td>Петин</td>
                  <td>petim@gmail.com</td>
                  <td>42352352</td>
                </tr>
                <tr class="contact">
                  <td class="delete-row"><span class="glyphicon glyphicon-remove" onclick="deleteRow(this)"></span></td>
                  <td>Петя</td>
                  <td>Васильев</td>
                  <td>vasya@mail.ru</td>
                  <td>3222248</td>
                </tr>
              </tbody>
            </table>

Но, к сожалению, я никак не могу заставить скрипт вписывать вот этот код в начале строки таблицы:

<td class="delete-row"><span class="glyphicon glyphicon-remove" onclick="deleteRow(this)"></span></td>

Он нужен для того, чтобы появлялась кнопка удаления строки. Вот собственно сам скрипт:

document.getElementById('average').addEventListener('submit', function (event) {
  event.preventDefault();
  var tr = document.createElement("tr");
  tr.className = "contact";
  var cols = ['form-name', 'form-surname', 'form-email', 'form-phone'];
  for (var q=0; q<cols.length; ++q) {
    var td = document.createElement("td");
    td.textContent = document.getElementById(cols[q]).value;
    tr.appendChild(td);
  }
  document.getElementById('contact-list').appendChild(tr);
});

Прошу, подскажите, как я могу решить мою проблему?