Create HTML element

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'

More like this

  • Array to HTML list

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

    JavaScript, Browser · Oct 20, 2020

  • Listen for an event only once

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

    JavaScript, Browser · Oct 22, 2020

  • URL parameters as object

    Creates an object containing the parameters of the current URL.

    JavaScript, Browser · Oct 22, 2020