How can I create rows of data using jquery append()?

Question

How can I make a new row of data using jquery? For example i have a div with an id "box" and I have two spans each with an id of "name" and "time". How can I have jquery append to this box holding both name and time? I tried experimenting and tried this code, but didn't work.

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

In this code, I expected the box to create a new row of data every time I click the button. So if I want 5 rows of data, I would just click the button 5 times.

mplungjan · Accepted Answer · 2017-12-03 07:34:05Z

2

IDs must be unique and you need new spans

$("#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>

With vars, you can use a template literal

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>

edited Dec 3, 2017 at 7:34

answered Dec 3, 2017 at 7:07

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Neville Nazerane Over a year ago

is the template literal a part of js or jquery?

mplungjan Over a year ago

It's JS: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

shahabvshahabi · Accepted Answer · 2017-12-03 07:10:08Z

0

this is how you must do :

$(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>

answered Dec 3, 2017 at 7:10

shahabvshahabi

9452 gold badges7 silver badges18 bronze badges

1 Comment

shahabvshahabi Over a year ago

hey dude i have no problem with your words but while i was trying to make it you have posted your answer .... where should i know that you answerd ???

Neville Nazerane · Accepted Answer · 2017-12-03 07:35:15Z

Since ID must be unique as @mplungjan mentioned, assuming you have some css linked with them, i'll just give examples with a class instead of IDs

$("#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>

As you can see, after using the syntax $("<div>") you can chain as you want like you would in jQuery. The main difference between this and what @mplungjan has shown is how dynamic you are planning to make these. If you are planning on expanding these divs and spans dynamically as you go you are better off using this. If not and you just want lesser syntax you could rather use his.

Collectives™ on Stack Overflow

How can I create rows of data using jquery append()?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related