javascript - 无法将 Button 元素附加到 li 父级

Question

我正在尝试使用 .appendChild 方法将按钮附加到 li 项目中，但它不起作用。我还尝试更改父项的内部 HTML。

let inputElement = document.querySelector('#input');
let listItem = document.createElement('li');
listItem.className = 'todo-item'

let checkButton = document.createElement('button');
checkButton.className = 'checkButton' 

//? When adding the child element, it is only added after the text content is defined.
listItem.appendChild(checkButton); 
listItem.textContent = inputElement.value;

<div class="app">
    <div class="list">
        <h1> My Todo List </h1>
        <ul class="todo-list" id="list">
            <div class="list-row">
                <li class="todo-item"><button class="checkButton"></button> Test Item </li>
            </div>
            <div class="list-row">
                <li class="todo-item"><button class="checkButton"></button> Test Item </li>
            </div>
        </ul>
    <input id="input" class="list-input" type="text" placeholder="Next I need to...">
    </div>
</div>

这是当前结果

如果我修改附加子项的顺序，按钮会显示，但这不是最好的结果

//? When adding the child element, it is only added after the text content is defined.
listItem.textContent = inputElement.value;
listItem.appendChild(checkButton); 

Answer 1

设置 textContent 属性将重置整个 li 元素，从而删除之前添加的按钮，尝试使用 insertAdjacentHTML() .

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element.

let inputElement = document.querySelector('#input');
let listItem = document.createElement('li');
listItem.className = 'todo-item'

let checkButton = document.createElement('button');
checkButton.className = 'checkButton' 

listItem.appendChild(checkButton); 
listItem.insertAdjacentHTML('beforeend',inputElement.value);

document.querySelector('#list').appendChild(listItem);

<div class="app">
  <div class="list">
      <h1> My Todo List </h1>
      <ul class="todo-list" id="list">
          <div class="list-row">
              <li class="todo-item"><button class="checkButton"></button> Test Item </li>
          </div>
          <div class="list-row">
              <li class="todo-item"><button class="checkButton"></button> Test Item </li>
          </div>
      </ul>
  <input id="input" class="list-input" type="text" placeholder="Next I need to...">
  </div>
</div>

---