Изменение HTML в JavaScript без innerHTML - PullRequest
Новая
       11

Изменение HTML в JavaScript без innerHTML

0 голосов
/ 14 ноября 2018

Допустим, мой код был довольно простым: 

let content = "";

for(let i=0; i<array.length; i++){
    content+='<h1>array[i]</h1>';
}

document.getElementById('some_id').innerHTML = content;

Мне не нравится идея вставлять HTML в мой код JavaScript, но я не знаю другого способа вставки элементов в DOM без использования innerHTML, метода html() JQuery или просто создания нового DOM элементы программно.

Как лучше всего вставлять HTML-элементы из JavaScript в отрасли или с учетом передового опыта?

Заранее спасибо!

Ответы [ 4 ]

0 голосов
/ 14 ноября 2018

Гибкий и более быстрый (эффективный) способ вставки HTML-элементов с использованием метода JavaScript insertAdjacentHTML. Это позволяет вам точно указать, где разместить элемент. Возможные значения позиции:

  • 'beforebegin'
  • 'afterbegin'
  • 'beforeend'
  • 'afterend'

Как это: 

 document.getElementById("some_id").insertAdjacentElement("afterbegin", content);

Вот пример Fiddle

0 голосов
/ 14 ноября 2018

Вы можете использовать строковые литералы DOMParser и ES6: 

const template = text => (
`
<div class="myClass">
    <h1>${text}</h1>
</div>
`);

Вы можете создать в памяти Фрагмент: 

const fragment = document.createDocumentFragment();
const parser = new DOMParser();
const newNode = parser.parseFromString(template('Hello'), 'text/html');
const els = newNode.documentElement.querySelectorAll('div');
for (let index = 0; index < els.length; index++) {
  fragment.appendChild(els[index]);  
}
parent.appendChild(fragment);

Поскольку фрагмент документа находится в памяти и не является частью основного дерева DOM, добавление дочерних элементов к нему не вызывает перекомпоновку страницы (вычисление положения и геометрии элемента). Исторически использование фрагментов документа могло привести к повышению производительности.

Источник: https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

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

Надеюсь, это поможет

0 голосов
/ 14 ноября 2018

Вы можете использовать метод createElement ()

В документе HTML метод document.createElement () создает элемент HTML, указанный в tagName, или HTMLUnknownElement, еслиtagName не распознано.

Вот пример, 

document.body.onload = addElement;

function addElement () { 
  // create a new div element 
  var newDiv = document.createElement("div"); 
  // and give it some content 
  var newContent = document.createTextNode("Hi there and greetings!"); 
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}
<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">The text above has been created dynamically.</div>
</body>
</html>
0 голосов
/ 14 ноября 2018

Создание элемента программно, а не через HTML должно иметь желаемый эффект. 

const parent = document.getElementById('some_id');
// clear the parent (borrowed from /3292473/udalit-vse-dochernie-elementy-uzla-dom-v-javascript)

while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
}

// loop through array and create new elements programmatically
for(let i=0; i<array.length; i++){
    const newElem = document.createElement('h1');
    newElem.innerText = array[i];
    parentElement.appendChild(newElem);
}
...