Создание DOM-элементов в Jquery

137

15 ноября 2020, 19:40

Как следует добавлять новые элементы на страницу используя Jquery?Или же лучше добавлять элементы через чистый JavaScript и только потом взаимодействовать с ними через Jquery?

Answer 1

Раз уж jQuery уже подключен, нет особой разницы.

Пример на jQuery (создание таблицы с указанным кол-вом столб-строк):

$(document).on('click', '#red', function(){ 
  const cell = Number( $('#cell').val() ); 
  const row  =  Number( $('#row').val() ); 
   
  const table = $('<table></table>'); 
  for(let i = 0; i < cell; i++){ 
      const tr = $('<tr></tr>'); 
  for(let u = 0; u < row; u++){ 
      const td = $('<td></td>'); 
      tr.append(td); 
    } 
    table.append(tr); 
  } 
   
  $('#content').empty(); 
  $('#content').append(table);   
});

#red {background-color: #fff1ba; border: 2px solid orange; outline:none;} 
 
td {width: 20px; height: 10px; border: 1px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<button id="red">Создать таблицу</button> 
 
<input id="cell" placeholder="кол-во строк?"> 
<input id="row" placeholder="кол-во столбиков?"> 
 
<div id="content"></div>

Ровно то же самое на чистом JS:

document.getElementById('red').addEventListener('click', function(){ 
  const cell = Number( document.getElementById('cell').value ); 
  const row  = Number( document.getElementById('row').value ); 
   
  const table = document.createElement('table'); 
  for(let i = 0; i < cell; i++){ 
    const tr = document.createElement('tr'); 
  for(let u = 0; u < row; u++){ 
    const td = document.createElement('td'); 
      tr.appendChild(td); 
    } 
    table.appendChild(tr); 
  } 
  document.getElementById('content').innerHTML = ""; 
  document.getElementById('content').appendChild(table); 
});

#red {background-color: #fff1ba; border: 2px solid orange; outline:none;} 
 
td {width: 20px; height: 10px; border: 1px solid red;}

<button id="red">Создать таблицу</button> 
 
<input id="cell" placeholder="кол-во строк?"> 
<input id="row" placeholder="кол-во столбиков?"> 
 
<div id="content"></div>

В процессе можно добавить td.addClass('class'); (jQ) или td.className = "class"; (JS)

Или добавить контент, потом append... td.html("БУБУ"); / td.innerHTML = "БУБУ";

Единственное, рекомендуют сначала всю конструкцию за кулисами создать, и только в конце одним append-ом добавить весь элемент куда надо. Было бы не правильно создавать элементы и пихать их по отдельности в HTML на каждом шаге.