如何为新按钮赋值

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++) {

  btn = document.createElement('button');

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

  //btn.setAttribute("onclick","clickfunction");

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

  btn.innderText  = celebrities[i];

  console.log(btn.value);

  document.getElementById("animals").append(btn);

}