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>

这是当前结果 browser screen capture

如果我修改了添加孩子的顺序，按钮会显示出来，但效果不是最好的

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

browser screen capture v2

Answer 1

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

Element接口的insertAdjacentHTML()方法将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析正在使用该元素的元素，因此不会破坏该元素内部的现有元素。

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>

Answer 2

首先不要对“;”那么贪婪标志;）发生这种情况是因为整个事情都是错误的:) 看，这将并且将在纯HTML中完美运行：

<ul>
    <li><input type="radio" name="gender" value="male"> Male</li>
    <li><input type="radio" name="gender" value="female"> Female</li>
    <li><input type="radio" name="gender" value="other"> Other  </li>
    ....
</ul>

现在我们在Javascript中完全一样。

var ipb=document.createElement("INPUT")    //Not button ! Forget that this 
                                          // button tag 
                                         // even exists
    ipb.setAttribute("id","ibp_0");     //always a good idea
    ipb.setAttribute("name","gender"); //if its inside a form you want to use
                                      //and a must have for radio buttons *)'
    ipb.setAttribute("type","radio");// or checkbutton or input - what you 
                                    //     want for a input type
    ipb.setAttribute("value","male");

         var txt = document.createTextNode("Male");
         ipb.appendChild(txt);

     // and now you can
     LIST.appendChild(ipb); //the formaly created <UL> Node for sure

正如您看到的一样，就像使用不同的语法编写html版本一样。后面没有神奇的东西可以为您效劳。

文本节点不是一个完美的主意。我会为此使用标签。或附加标签。标签具有“ FOR”属性，如果您采用这种方式，我真的建议使用。但这让我不敢向ou :)玩得开心！

*）单选按钮。他们知道他们属于同一个名字。

Answer 3

您已经为listItem创建了元素，但从未真正将其添加到DOM中。

在尝试添加复选框之前，您需要添加或插入listItem。

无法将Button元素附加到父级

3 个答案: