Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Insert HTML without Replacing the Existing Content</title> </head> <body> <!-- beforebegin --> <div id="main"> <!-- afterbegin --> <h1 id="title">Hello World!</h1> <!-- beforeend --> </div> <!-- afterend --> <button type="button" onclick="insertContent()">Insert Content</button> <script> function insertContent() { // Selecting target element var mainDiv = document.getElementById("main"); // Inserting HTML just before the element itself, as a previous sibling mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>'); // Inserting HTML just inside the element, before its first child mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>'); // Inserting HTML just inside the element, after its last child mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>'); // Inserting HTML just after the element itself, as a next sibling mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>'); } </script> </body> </html>
