javascript - 如何使用 jquery append() 创建数据行？

Question

如何使用 jquery 创建新行数据？例如，我有一个 id 为“box”的 div，并且有两个 span，每个 span 的 id 为“name”和“time”。 我怎样才能让 jquery 附加到这个包含名称和时间的框？我尝试了实验并尝试了这段代码，但没有成功。

$("#button").click(function(){
    $("#box").append(
        $("#name").text("username"),
        $("#time").text("5:00pm")
    ); 
)}

在此代码中，我希望每次单击按钮时该框都会创建一行新数据。因此，如果我想要 5 行数据，我只需单击按钮 5 次即可。

Answer 1

ID 必须是唯一的，并且您需要新的跨度

$("#button").on("click",function() {
  $("#box").append(
    "<br><span>username</span> <span>5:00pm</span>"
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="button">Click</button>
<div id="box"></div>

通过变量，您可以使用模板文字

var cnt=0, 
    data = [{ username: "John", time: "05:00pm" },
            { username: "Paul", time: "07:00pm" }];

$("#button").on("click", function() {
  if (cnt < data.length) {
    $("#box").append(
      `<br><span class="user">${data[cnt].username}</span> <span class="time">${data[cnt++].time}</span>`
    );
  }
});

.user { color:green }
.time { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="button">Click</button>
<div id="box"></div>