jquery append（）を使用してデータの行を作成するにはどうすればよいですか？

Question

jqueryを使用して新しい行のデータを作成するにはどうすればよいですか？たとえば、私はID "ボックス"と私は "名前"と "時間"のIDを持つ2つのスパンを持っているdivがあります。 名前と時刻の両方を保持するこのボックスに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>

VARSで

が必要

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>

Answer 2

これは、あなたがしなければならない方法です。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="box"> 
 
    
 
</div> 
 

 
<a id="button">button</a>

Answer 3

@mplungjanが述べたように、IDは一意でなければなりませんので、あなたがそれらにリンクされたいくつかのCSSを持っていると仮定すると、私はちょうどで例をあげます代わりに

$("#button").click(function(){ 
 
    $("#main").append(
 
    $("<div>").addClass("box") 
 
       .append($("<span>").addClass("name").text("username")) 
 
       .append($("<span>").addClass("time").text("5:00PM")) 
 
    ); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="main"></div> 
 

 
<button id="button">Click me</button>

IDのクラス

ご覧のとおり、$("<div>")の構文を使用した後は、jQueryと同じようにチェーンすることができます。これと@mplungjanの主な違いは、あなたが動的にこれらを作ることを計画していることです。これらのdivとspanを動的に拡張する計画がある場合は、これを使用する方がよいでしょう。そうでなければ構文を少なくしたいのであれば、彼の方を使うこともできます。