Add 4 new browser snippets

triggerEvent - trigger an event on an element, insertAfter & insertBefore - parse and insert HTML after or before an element respectively, elementContains - checks if an element contains another element

snippets/elementContains.md

@@ -0,0 +1,14 @@
+### elementContains
+
+Returns `true` if the `parent` element contains the `child` element, `false` otherwise.
+
+Check that `parent` is not the same element as `child`, use `parent.contains(child)` to check if the `parent` element contains the `child` element.
+
+```js
+const elementContains = (parent, child) => parent !== child && parent.contains(child);
+```
+
+```js
+elementContains(document.querySelector('head'), document.querySelector('title')); // true
+elementContains(document.querySelector('body'), document.querySelector('body')); // false
+```

snippets/insertAfter.md

@@ -0,0 +1,13 @@
+### insertAfter
+
+Inserts an HTML string after the end of the specified element.
+
+Use `el.insertAdjacentHTML()` with a position of `'afterend'` to parse `htmlString` and insert it after the end of `el`.
+
+```js
+const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);
+```
+
+```js
+insertAfter(document.getElementById('myId'),'<p>after</p>'); // <div id="myId">...</div> <p>after</p>
+```

snippets/insertBefore.md

@@ -0,0 +1,13 @@
+### insertBefore
+
+Inserts an HTML string before the start of the specified element.
+
+Use `el.insertAdjacentHTML()` with a position of `'beforebegin'` to parse `htmlString` and insert it before the start of `el`.
+
+```js
+const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);
+```
+
+```js
+insertBefore(document.getElementById('myId'),'<p>before</p>'); // <p>before</p> <div id="myId">...</div>
+```

snippets/triggerEvent.md

@@ -0,0 +1,16 @@
+### triggerEvent
+
+Triggers a specific event on a given element, optionally passing custom data.
+
+Use `new CustomEvent()` to create an event from the specified `eventType` and details.
+Use `el.dispatchEvent()` to trigger the newly created event on the given element.
+Omit the third argument, `detail`, if you do not want to pass custom data to the triggered event.
+
+```js
+const triggerEvent = (el, eventType, detail = undefined) => el.dispatchEvent(new CustomEvent(eventType, {detail: detail}));
+```
+
+```js
+triggerEvent(document.getElementById('myId'),'click');
+triggerEvent(document.getElementById('myId'),'click', {username: 'bob'});
+```