diff --git a/README.md b/README.md index 8c87ac7d3..3e9f2ee88 100644 --- a/README.md +++ b/README.md @@ -144,6 +144,7 @@ average(1, 2, 3); * [`arrayToHtmlList`](#arraytohtmllist) * [`bottomVisible`](#bottomvisible) * [`copyToClipboard`](#copytoclipboard-) +* [`createElement`](#createelement) * [`currentURL`](#currenturl) * [`detectDeviceType`](#detectdevicetype) * [`elementIsVisibleInViewport`](#elementisvisibleinviewport) @@ -1783,6 +1784,39 @@ copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.
[⬆ Back to top](#table-of-contents) +### createElement + +Creates an element from a string. + +Use `document.createElement()` to create a new element. Set its `innerHTML` +to the string supplied as the argument. Use `ParentNode.firstElementChild` to +return the element version of the string. + +```js +const createElement = str => { + const el = document.createElement('div'); + el.innerHTML = str; + return el.firstElementChild; +}; +``` + +
+Examples + +```js +const el = createElement( + `
+

Hello!

+
` +); +console.log(el.className); // 'container' +``` + +
+ +
[⬆ Back to top](#table-of-contents) + + ### currentURL Returns the current URL. diff --git a/docs/index.html b/docs/index.html index 4f9c4aef7..295d9e390 100644 --- a/docs/index.html +++ b/docs/index.html @@ -40,7 +40,7 @@ },1700); } }, false); - }

logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

 

Adapter

call

Given a key and a set of arguments, call them when given a context. Primarily useful in composition.

Use a closure to call a stored key with stored arguments.

const call = (key, ...args) => context => context[key](...args);
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
 
Adapter
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
 
Promise.resolve([1, 2, 3])
   .then(call('map', x => 2 * x))
   .then(console.log); //[ 2, 4, 6 ]
@@ -329,6 +329,17 @@ Object.assig
   }
 };
 
copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.
+
createElement
Creates an element from a string.
Use document.createElement() to create a new element. Set its innerHTML to the string supplied as the argument. Use ParentNode.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'
 
currentURL
Returns the current URL.
Use window.location.href to get current URL.
const currentURL = () => window.location.href;
 
currentURL(); // 'https://google.com'
 
detectDeviceType
Detects wether the website is being opened in a mobile device or a desktop/laptop.
Use a regular expression to test the navigator.userAgent property to figure out if the device is a mobile device or a desktop/laptop.
const detectDeviceType = () =>