Создание нескольких элементов с javascript - PullRequest
Новая
       53

Создание нескольких элементов с javascript

0 голосов
/ 15 марта 2020

У меня есть html образец дерева элементов (ниже), который я хочу вернуть с соответствующими данными для каждого совпадения, которое я получил в базе данных. Допустим, есть 5 совпадений. Нужно ли создавать 5 заданных элементов и заполнять их данными javascript?

Я собираюсь запустить al oop, но это похоже на высокую производительность (создание всего дерева элементов для каждого соответствия ). Вместо этого, могу ли я использовать данный элемент (pi c), заполнить его javascript и вместо этого поместить в dom (x раз)? По возможности как? 

<!-- sample elem -->
<div class="col-12 col-md-4" style="display: none">
    <div class="card my-3 mx-1">
        <a href="#"><img src="" alt="img"></a>
        <div class="card-body">
            <div class="row">
                <div class="col-12 p-1">Country</div>
                <div class="col-3 p-1">State</div>
                <div class="col-4 p-1">City</div>
            </div>
        </div>
    </div>
</div>

Ответы [ 2 ]

1 голос
/ 16 марта 2020

Для дальнейшего уточнения моего комментария: часто повторяющаяся вставка элементов в дерево DOM вызывает проблемы с производительностью, поскольку документ должен переформатироваться каждый раз при вставке нового узла. Вам не следует беспокоиться о слишком частом вызове / вызове document.createElement(): это меньше всего вас беспокоит.

Поэтому я бы посоветовал вам использовать функцию для создания всего элемента семпла. Затем вы можете вызвать эту функцию для создания всего элемента карты по своему усмотрению на каждой итерации l oop, а затем добавить его к фрагменту документа.

Псевдокод: 

function createCard() {
  // Create the entire `sample element` as you would call it
  const el = <something>;
  return el;
}

// Create new document fragment to hold all the nodes
// At this point, we are NOT injecting them into the DOM yet
const fragment = new DocumentFragment();

// Go through your data and create new card for each data point
for (let i = 0; i < 5; i++) {
    fragment.appendChild(createCard());
}

// Now this is when you insert the entire bulk of the content into the DOM
document.querySelector('#myInsertionTarget').appendChild(fragment);

Код подтверждения концепции выглядит следующим образом: 

// Since we are creating so many `<div>` elements
// It helps to further abstract its logic into another function
function createDivElement(classes, text) {
  const div = document.createElement('div');
  
  if (classes.length)
    div.classList.add(...classes);
  
  if (text)
    div.innerText = text;
  
  return div;
}

// Call this whenever you want to create a new card
function createCard(i) {
  const colCountry = createDivElement(['col-12', 'p-1'], 'Country');
  const colState = createDivElement(['col-3', 'p-1'], 'State');
  const colCity = createDivElement(['col-4', 'p-1'], 'City');
  
  const row = createDivElement(['row']);
  row.appendChild(colCountry);
  row.appendChild(colState);
  row.appendChild(colCity);
  
  const cardBody = createDivElement(['card-body']);
  cardBody.appendChild(row);
  
  const image = document.createElement('img');
  image.alt = 'img';
  // Proof-of-concept image source, you can ignore this!
  image.src = `https://placehold.it/100x50?text=Image%20${i+1}`;
  
  const imageLink = document.createElement('a');
  imageLink.href = '#';
  imageLink.appendChild(image);
  
  const card = createDivElement(['card', 'my-3', 'mx-1']);
  card.appendChild(imageLink);
  card.appendChild(cardBody);
  
  const outer = createDivElement(['col-12', 'col-md-4']);
  // outer.style.display = 'none';
  outer.appendChild(card);
  
  return outer;
}

// Create new document fragment
const fragment = new DocumentFragment();

// In each iteration of the loop, insert the new card element into fragment
for (let i = 0; i < 5; i++) {
  const el = createCard(i);
  fragment.appendChild(el);
}

// When you're done generating the entire set of elements
// You can then insert the fragment into your DOM (finally!)
document.querySelector('#app').appendChild(fragment);
<div id="app"></div>
1 голос
/ 15 марта 2020

Производительность невелика для 15-20 элементов и только для этой разметки.

Однако, если вы можете доказать, что это медленно, знайте, что строки быстрее. Таким образом, более быстрый подход заключается в следующем:

  1. Сохранение шаблона разметки в виде строки
  2. Создание строки с окончательной разметкой - она ​​может повторять шаблон столько раз, сколько необходимо, очевидно, заполненный этим
  3. Вставить разметку в целевой узел

Вот как это будет выглядеть: 

const products = [{ title: 'gearbox' }, { title: 'drive shaft' }, { title: 'spark plug'}]
const myTemplate = '<div class="product">{title}</div>'
const finalMarkup = products.map(({ title }) => myTemplate.replace('{title}', title))

document.getElementId('targetNode').innerHtml = finalMarkup
...