如何从脚本设置按钮内容？

Question

我正在尝试制作 todolist，我可以在其中添加新任务以使用与默认任务相同的功能（可点击的任务旁边有“删除”按钮）。我当前的代码正在创建新按钮，但它只是空的灰色矩形，没有任何内容（但它可以正常工作 - 它正在删除选定的任务） - 如何将新按钮的内容设置为“删除”？

片段

function createListElement() {
	    var li = document.createElement("li");
	    var span = document.createElement("span");//create span
	    var button1 = document.createElement("button");//create button
	    span.appendChild(document.createTextNode(input.value)); //assign value to span
	    span.classList.add("complited"); //add class "complited" to span
	    li.appendChild(span); //put span as li child
	    ul.appendChild(li); // put li as ul child
	    li.appendChild(button1);
	    button1.classList.add("buttonli");
        button1.value("Delete"); // here I've got error "button1.value is not a function"
	    li.classList.add("clickable"); //asign "clickable" class to li
	    input.value = "";
}

<ul id="ul1">
		<li class="bold red clickable" random="23"><span class="complited">Notebook</span><button class="buttonli">Delete</button></li>
		<li class="clickable"><span class="complited">Jello</span> <button class="buttonli">Delete</button></li>
		<li class="clickable"><span class="complited">Spinach</span> <button class="buttonli">Delete</button></li>
		<li class="clickable"><span class="complited">Rice</span> <button class="buttonli">Delete</button></li>
		<li class="clickable"><span class="complited">Birthday Cake</span> <button class="buttonli">Delete</button></li>
		<li class="clickable"><span class="complited">Candles</span> <button class="buttonli">Delete</button></li>
	</ul>

Answer 1

button1.value("Delete"); // here I've got error "button1.value is not a function"

不，这是一个简单的访问器属性。

button1.value = "Delete"

...但是它设置了当按钮用于提交表单时将提交的值。它不设置显示文本，即按钮元素内的内容。

这就是你写的原因：

<button class="buttonli">Delete</button>

而不是：

<button class="buttonli" value="Delete"></button>

所以创建一个文本节点并将其放在按钮内：

const button_text = document.createTextNode("Delete");
button1.appendChild(button_text);

Answer 2

function createListElement() {
  var li = document.createElement("li");
  var span = document.createElement("span"); //create span
  var button1 = document.createElement("button"); //create 
  var ul = document.getElementById("ul1"); //ul 
  var input = document.createElement("input"); //ul 
  span.appendChild(document.createTextNode(input.value)); //assign value to span
  span.classList.add("complited"); //add class "complited" to span
  li.appendChild(span); //put span as li child
  ul.appendChild(li); // put li as ul child
  li.appendChild(button1);
  button1.classList.add("buttonli");
  button1.innerHTML = "Delete"; //Because you are using a <button> instead of <input type="button">, you need to set the innerHTML
  li.classList.add("clickable"); //asign "clickable" class to li
  input.value = "";
}

那是因为您使用的是 a 而不是，因此您需要设置 innerHTML。 Check this answer here

检查下面的小提琴。 Jsfiddle with solution