Creating multiple elements in jquery [duplicate]

Question

I'm new here and look for a way to create multiple elements by using jquery.

Here's an example. I create a table and append a row. How could i include 4 rows more without using createElement?

function table(){
    $(document.createElement("table")).appendTo($('body'))
    $(document.createElement('tr')).appendTo($('table'))
}

Why use this mix jquery/pure js ? $( "body" ).append( "<table><tr></tr><tr></tr><tr></tr><tr></tr></table>" ); instead for example — Simone Rossaini
– Simone Rossaini, Commented Jan 19, 2022 at 9:51
Alternative if you don't want to build a string is to use .appendTo to return the newly appended element var tbl = $("<table>").appendTo("body"); var tr = $("<tr>").appendTo(tbl); cols.forEach(c => tbl.append("<td>")) etc — fdomn-m
– fdomn-m, Commented Jan 19, 2022 at 10:01
Thank you for your answer. it's been usefull and iv'e learnt from it — user17972507
– user17972507, Commented Jan 21, 2022 at 7:39

mplungjan · Accepted Answer · 2022-01-19 10:03:11Z

0

You do not need createElement if you use jQuery

$("body").append(`<table id="table1">
  <thead><tr><th>Header 1</th><th>Header 2</th></thead>
  <tbody>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </tbody>
</table>`)

Or have a loop:

const rows = Array.from({length:4}).map((_,i) => `<tr><td>Row ${i} Cell 1</td><td>Cell 2</td></tr>`).join("")
$("body").html(`<table><tbody>${rows}</tbody></table>`)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

answered Jan 19, 2022 at 10:03

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

1 Comment

user17972507 Over a year ago

Thank you. I'm new and started using jquery quiet recently. You solved my question and i learnt something new and easy.

Collectives™ on Stack Overflow

Creating multiple elements in jquery [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related