Блог

Главная - Вопросы по программированию - Как вставить HTMLCollection на страницу?

Как вставить HTMLCollection на страницу?

#javascript #htmlcollection

#javascript #htmlcollection

Вопрос:

В следующем примере HTMLCollection создается из строки, содержащей HTML.

Возможно ли в конечном итоге добавить HTML-коллекцию в другой элемент, без необходимости добавлять дополнительный окружающий элемент div или template?

 const stringHTML = `
	<div>
  	<h1>This is a div</h1>
	  <div>
  		<p>inner div</p>
		</div>
  </div>
  <div>
  	<h2>Another div</h2>
  </div>
`;


/**
 * @param html {String} Representing a single HTML element
 * @return {HTMLCollection} The newly created element
 */
const stringToHTMLCollection = function(html) {
  /** @type {HTMLElement} */
  const template = document.createElement('template');
  html = html.trim(); // Never return a text node of whitespace as the result
  template.innerHTML = html;
  return template.content.children;
}

console.log(stringToHTMLCollection(stringHTML));

// This works.
Object.entries(stringToHTMLCollection(stringHTML)).forEach(([key, element])  => {
      result.insertAdjacentElement('beforeend', element);
    });
    
// However isn't there a more elegant way using something similar to insertAdjecentHTML?  
 <div id="result"></div>

Комментарии:

1. Возможно ли в конечном итоге добавить HTML-коллекцию в другой элемент, без необходимости добавлять дополнительный окружающий элемент div или template? << Кажется, что вам должно быть довольно легко просто попробовать самостоятельно и получить свой ответ.

2. insertAdjacentHTML Ожидается, что вторым аргументом будет строка DOM, а не коллекция HTML

3. Я голосую за то, чтобы закрыть этот вопрос как не относящийся к теме, потому что OP задает общий вопрос, по-видимому, не пытаясь сначала ответить на него для себя.

4. Ну, я, вероятно, что-то упускаю из виду. Один из методов, который я использовал, — это перебор каждого элемента в коллекции и вставка его с помощью insertAdjacentHTML. Однако мне интересно, возможно ли более элегантный способ этого.

Ответ №1:

Поскольку insertAdjacentHTML ожидается, что вторым аргументом будет строка DOM, а не коллекция HTML, вы можете просто передать stringHTML этой функции:

 const stringHTML = `
	<div>
  	<h1>This is a div</h1>
	  <div>
  		<p>inner div</p>
		</div>
  </div>
  <div>
  	<h2>Another div</h2>
  </div>
`;


/**
 * @param html {String} Representing a single HTML element
 * @return {HTMLCollection} The newly created element
 */

result.insertAdjacentHTML('beforeend', stringHTML);  
 <div id="result"></div>

Комментарии:

1. Спасибо за предложение. Это определенно сработало бы, однако в функции вводом является HTMLCollection, а не строка (текст), которую ожидает метод insertAdjecentHTML.