JavaScriptでのDOM操作（appendChild）

Question

現在JSで、DOM操作を行なっているのですが、躓いたため質問させてください。

<section class="todo_category">
  <ul>
  </ul>
</section>

上記のようなDOMがあります。<ul>の下に新たな値を追加したいです。
そのためいかのように書いて、window.onload()　時に追加されるようにしたかったのですが、なぜか起動しません。要素の追加の方法は以下ではダメなのでしょうか？
教えてください。

let buttonObj = `
    <li class="adjust-box box-1x2" id="" ontouchstart="">
      <div class="inner">
        <p>test</p>
      </div>
    </li>`
  let todoParentObj = document.getElementsByClassName('todo_category')[0].getElementsByTagName('ul');
  todoParentObj[0].appendChild(buttonObj);

Comments

[m.ts10806]

エラー出てますけどそこは確認されました？　＜ブラウザ開発ツールのコンソール

[x_x]

「jQuery」タグが付いていますが、関係あるのでしょうか？
jQueryでの回答でもよいという意味ですか？

Answer 1

jQueryのタグもついているので、jQueryで。
付与するだけなら以下。

//前略
$('.todo_category').find('ul').append(buttonObj);

個人的にはbuttonObjは文字列じゃなくした方が良い気がします(メンテと可読性のため)。

let buttonObj = 
$('<li>', {
  class: "adujst-box box-1x2",
  id: "",
  ontouchstart: ""
});
let div = $('<div>', { class: "inner" });
let p = $('<p>', { text: "test" });

$('.todo_category').find('ul').append(buttonObj.append(div.append(p)));

Answer 2

buttonObjがElementではなく単なる文字列だからです。
今のままで入れたいのでしたらinnerHTMLを使うべきです。
appendChildを使いたいのでしたらcreateElementなどで作る必要があります。

Answer 3

dom処理になっていませんね
もしappendChildで処理するならliはcreateElementしてください
文字列を挿入したいならinnerHTMLで誤魔化せばいいでしょう

<script>
window.addEventListener('DOMContentLoaded', function(e){
  let buttonObj = `
    <li class="adjust-box box-1x2" id="" ontouchstart="">
      <div class="inner">
        <p>test</p>
      </div>
    </li>`;
  var todoParentObj=document.querySelector('.todo_category ul');
  todoParentObj.innerHTML+=buttonObj;
});
</script>

<section class="todo_category">
<ul>
</ul>
</section>

dom処理

<script>
window.addEventListener('DOMContentLoaded', function(){
  var li=document.createElement('li');
  li.classList.add('adjust-box','box-1x2');
  li.setAttribute('id','');
  li.addEventListener('touchstart',function(){});
  var div=document.createElement('div');
  div.classList.add('inner');
  var p=document.createElement('p');
  document.querySelector('.todo_category ul').appendChild(li);
  li.appendChild(div);
  div.appendChild(p);
  p.appendChild(document.createTextNode('test'));
});
</script>

<section class="todo_category">
<ul>
</ul>
</section>

Comments

[van-0215]

質問ですが、appendChild , innerHTMLどちらでもできると思いますが、どちらの方が良いのでしょうか

[yambejp]

dom処理追記しておきました。
ちゃんとできるなら本来ならdom処理のほうが構造的に処理ができるので
よいでしょうけど、冗長になりがちなので無理してまでやらなくてもよいかと。

またjQueryなら
$('.todo_category ul').append($(buttonObj))
みたいにすればdomとして機能するので選択肢としてはありです