HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>insertAdjacentHTML MDN</title>
</head>
<body>
  <select id="position">
    <option value="beforebegin">beforebegin</option>
    <option value="afterbegin">afterbegin</option>
    <option value="beforeend">beforeend</option>
    <option value="afterend" selected>afterend</option>
  </select>
  <button type="button" id="insert">Insert HTML</button>
  <p>Text with <code id="subject">target element</code> inside.</p>
  <pre id="out">—</pre>
  <script>
    document.getElementById("insert").onclick = function () {
      var subject = document.getElementById("subject");
      var pos = document.getElementById("position").value;
      subject.insertAdjacentHTML(pos, "<strong>inserted text</strong>");
      document.getElementById("out").textContent = "Inserted at " + pos;
    };
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.insertAdjacentHTML — MDN positions (Try It)