如何为新按钮赋值

Question

for (var i = 0; i < animals.length; i++) {

  btn = $("<button>");

  btn.attr("class", "btn");

  btn.attr("value", animals[i]);

  btn.text(celebrities[i]);

  console.log(btn.value);

  $("#animals").append(btn);

  }

控制台日志记录 btn.value 返回未定义。我究竟做错了什么？

Answer 1

按钮没有 value 属性，使用可以像这样使用 data-value 来设置按钮的属性。还有你错误的格式btn = $("<button>");btn = $("button");btn.attr("class", "btn");btn.attr("data-value", "Test Value");btn.text("Text");console.log(btn.text());console.log(btn.data("value"));btn = $("button");btn.attr("class", "btn");btn.attr("data-value", "Test Value");btn.text("Text");console.log(btn.text());console.log(btn.data("value"));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button></button>

Answer 2

如果您想这样做是纯 JS，请按照以下步骤操作。1) 使用文档的 createElement 函数创建一个元素。通过此功能可以创建任何 HTML/OWN 元素之王2）用户setAttribute函数，用于设置属性3) 将元素附加到文档的父元素中var animals = ['tiger','dingo','panther']var celebrities = ['cel1 1','cel 2','cel 3']for (var i = 0; i < animals.length; i++) {&nbsp; btn = document.createElement('button');&nbsp; btn.setAttribute("class", "btn");&nbsp; //btn.setAttribute("onclick","clickfunction");&nbsp; btn.setAttribute("value", animals[i]);&nbsp; btn.innderText&nbsp; = celebrities[i];&nbsp; console.log(btn.value);&nbsp; document.getElementById("animals").append(btn);}