prepend() VS before()

prepend() vs before()

  1. prepend(): Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

  2. before(): Insert content, specified by the parameter, before each element in the set of matched elements.

append() vs after()

  1. append(): Insert content, specified by the parameter, to the end of each element in the set of matched elements.

  2. after(): Insert content, specified by the parameter, after each element in the set of matched elements.
run this source code Browser View

TEXT HERE

TEXT HERE
Full Source
<html> <head> <title>jQuery prepend() VS before() and append() VS after() example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function(){ $("p").append("<strong style='color:red'>.....Append</strong>"); $("p").after("<strong style='color:red'>After....</strong>"); $("div").prepend("<strong style='color:blue'>Prepend....</strong>"); $("div").before("<strong style='color:blue'>...Before</strong>"); }); }); </script> </head> <body> <button id="btn">Append/After/Prepend/Before</button> <p>TEXT HERE</p> <div>TEXT HERE</div> </body> </html>