JSFiddle - React, Tailwind, and code Playground

by shivaay123

HTML

<!DOCTYPE html>
<html>
<head>
<style>
  * { font-family: Calibri; font-size: 20px; }
  section { border: solid 1px #ddd; padding: 10px; margin: 5px 0;}
  r { color: green; }
</style>
</head>

<body>
  <h2>
    A new element is inserted after the "header" section using "insertBefore() method in JavaScript.
  </h2>
  
  <section id='header'>
    Head Section
  </section>
  
  <section id='footer'>
    Foot Section
  </section>
</body>

<script>
let add_new_element = () => {
  let header = document.getElementById('header');
  let newElement = document.createElement('r');
  newElement.innerHTML = 'Content inside r element';
  
  header.parentNode.insertBefore(newElement, header.nextSibling);
}

add_new_element();

</script>
</html>