```html <select id="position"> <br /> <option>beforebegin</option>

</select>

<button id="insert">Insert HTML</button> <button id="reset">Reset</button>

Some text, with a code-formatted element inside it.

```

```js const insert = document.querySelector("#insert"); insert.addEventListener("click", () => { const subject = document.querySelector("#subject"); const positionSelect = document.querySelector("#position"); subject.insertAdjacentHTML( positionSelect.value, "inserted text" ); });

const reset = document.querySelector("#reset"); reset.addEventListener("click", () => { document.location.reload(); });

```

js var mylist = document.getElementById('mylist'); mylist.insertAdjacentHTML('beforeend', '<li>third</li>');

```html

• first
• second

```

```js /* * @param {String} HTML representing a single element * @return {Element} / function htmlToElement(html) { var template = document.createElement('template'); html = html.trim(); // Never return a text node of whitespace as the result template.innerHTML = html; return template.content.firstChild; }

var td = htmlToElement('<td>foo</td>'), div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

/* * @param {String} HTML representing any number of sibling elements * @return {NodeList} / function htmlToElements(html) { var template = document.createElement('template'); template.innerHTML = html; return template.content.childNodes; }

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>'); ```