例

by techyankee

HTML

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-9">
            <h1>ToDo</h1>
            <div class="todo-app">
                <input type="text" name="" value="">
                <button id="button" type="button" name="button">追加</button>

                <ul id="todo-list">
                </ul>


                <template id="productrow">
                  <li>
                      <span></span>
                      <button type="button" name="button">削除</button>
                  </li>
                </template>

            </div>
        </div>
    </div>
</div>

CSS

table {
  background: #000;
}
table td {
  background: #fff;
}

JavaScript

var template = document.querySelector('#productrow');
// console.log(template);


document.addEventListener("DOMContentLoaded",function(){
  // console.log('aaa');

  document.getElementById("button").onclick = function() {

    // templete 要素の content 属性の有無を確認することで、
    // ブラウザーが HTML template 要素に対応しているかテストします。
    if ('content' in document.createElement('template')) {

        var todoul  = document.querySelector("#todo-list");
        var clone = document.importNode(template.content, true);
        var span = clone.querySelectorAll("span");
        // td[0].textContent = "1235646565";
        // td[1].textContent = "Stuff";
        span[0].textContent = "やること";

        todoul.appendChild(clone);

    } else {
      // HTML template 要素に対応していないので
      // 表に行を追加するほかの方法を探します。
    }
    console.log('追加');
  };
});