Create HTML element

OSCC · JavaScript, Browser · Oct 19, 2020

Creates an element from a string (without appending it to the document). If the given string contains multiple elements, only the first one will be returned.

  • Use Document.createElement() to create a new element.
  • Use Element.innerHTML to set its inner HTML to the string supplied as the argument.
  • Use Element.firstElementChild to return the element version of the string.
const createElement = str => {
  const el = document.createElement('div');
  el.innerHTML = str;
  return el.firstElementChild;
};
const el = createElement(
  `<div class="container">
    <p>Hello!</p>
  </div>`
);
console.log(el.className); // 'container'

Recommended snippets

  • Array to HTML list

    JavaScript, Browser

    Converts the given array elements into <li> tags and appends them to the list of the given id.

  • Adds an event listener to an element that will only run the callback the first time the event is triggered.

  • URL parameters as object

    JavaScript, Browser

    Creates an object containing the parameters of the current URL.