jQuery after() and before() Methods Example

jQuery After and Before Methods

<!DOCTYPE html>
<html>
<head>
  <title>jQuery after() and before() Methods Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#addAfterButton').click(function() {
        $('#targetElement').after('<p>Content after the target element</p>');
      });
      
      $('#addBeforeButton').click(function() {
        $('#targetElement').before('<p>Content before the target element</p>');
      });
    });
  </script>
</head>
<body>
  <h2>jQuery after() and before() Methods Example</h2>
  
  <div>
    <p>Existing Content</p>
    <button id="addAfterButton">Add Content After</button>
    <button id="addBeforeButton">Add Content Before</button>
    <p id="targetElement">Target Element</p>
  </div>
</body>
</html>

Code Output

Existing Content

Target Element

After and Before methods

These methods are used to insert content after and before selected elements, respectively.