Javascript Can'；t将按钮元素附加到li父元素

我试图使用

.appendChild

方法将按钮附加到li项中，但它不起作用。我还试图改变家长的内部HTML

let-inputElement=document.querySelector（“#input”）；
让listItem=document.createElement（'li'）；
listItem.className='待办事项'
让checkButton=document.createElement（'button'）；
checkButton.className='checkButton'
//? 添加子元素时，仅在定义文本内容后添加。
listItem.appendChild（选中按钮）；
listItem.textContent=inputElement.value

我的待办事项清单

测试项目
测试项目

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

在尝试添加复选框之前，需要追加或插入
列表项
 设置textContent属性将重置整个li元素，从而删除先前添加的按钮，请尝试

元素接口的
insertAdjacentHTML（）
方法将指定的文本解析为HTML或XML，并将生成的节点插入到DOM树的指定位置。它不会重新分析正在使用它的元素，因此不会损坏该元素中的现有元素


let-inputElement=document.querySelector（“#input”）；
让listItem=document.createElement（'li'）；
listItem.className='待办事项'
让checkButton=document.createElement（'button'）；
checkButton.className='checkButton'
listItem.appendChild（选中按钮）；
listItem.insertAdjacentHTML（'beforeend'，inputElement.value）；
document.querySelector（“#list”）.appendChild（listItem）

我的待办事项清单

测试项目
测试项目

首先不要对“；”符号如此贪婪；）
发生这种情况是因为整个事情都错了：）
看，这将并且将在纯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 

var ipb=document.createElement（“输入”）//非按钮！忘了这个
//按钮标签
//甚至存在
ipb.setAttribute（“id”、“ibp_0”）//总是个好主意
ipb.setAttribute（“姓名”、“性别”）//如果它位于要使用的窗体内
//以及单选按钮的必备配件*）'
ipb.setAttribute（“类型”、“无线电”）；//或检查按钮或输入-您需要什么
//想要输入类型吗
ipb.setAttribute（“值”、“男性”）；
var txt=document.createTextNode（“男性”）；
ipb.appendChild（txt）；
//现在你可以
儿童（ipb）名单//正式创建的
节点是肯定的

正如您所看到的，这与用不同的语法编写html版本是一样的。背后没有什么神奇的东西能为你做点什么

文本节点不是一个完美的想法。我会用一个标签。或附加标签。
标签有一个“FOR”属性，我真的建议如果你这样做的话使用它。
但这一打字我让欧：）玩得开心

*)单选按钮。他们知道他们的名字属于同一个元素。
那么，在添加子元素时，如何在定义文本内容后才添加子元素？按钮没有文本，我只是尝试在创建按钮后向按钮添加文本，但仍然没有显示。如果使用输入类型单选，允许我删除特定的子节点吗？我想添加一个函数来从列表中删除一个项目，现在我只想让它们被删除：）如果您将type radio替换为type checkbox（并调整名称），您可以自己测试它。我只是给他们看，因为他们是最难理解的人，因为你的截图看起来像。我会添加一个按钮来删除东西，或者添加额外的复选框来批量删除。这取决于你-你设计：）看看别人设计了什么和你喜欢用什么通常是个好主意。我也会把像create_checkbox create input field这样的东西放到函数中。使重用代码或构建好的模板系统变得容易。创造这样的东西是怎么说的：“一项不那么有趣的任务”；）