Nest all content into snippets
This commit is contained in:
33
snippets/js/s/create-element.md
Normal file
33
snippets/js/s/create-element.md
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Create HTML element
|
||||
type: snippet
|
||||
language: javascript
|
||||
tags: [browser]
|
||||
cover: flower-portrait-4
|
||||
excerpt: Creates an element from a string without appending it to the document.
|
||||
dateModified: 2020-10-19T18:51:03+03:00
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
```js
|
||||
const createElement = str => {
|
||||
const el = document.createElement('div');
|
||||
el.innerHTML = str;
|
||||
return el.firstElementChild;
|
||||
};
|
||||
```
|
||||
|
||||
```js
|
||||
const el = createElement(
|
||||
`<div class="container">
|
||||
<p>Hello!</p>
|
||||
</div>`
|
||||
);
|
||||
console.log(el.className); // 'container'
|
||||
```
|
||||
Reference in New Issue
Block a user