jQuery - Dom Manipulation

2 - Add an element

  • The HTML

<p class="beauty-blue">The first beauty-blue paragraph</p>
  <p>The second paragraph</p>

  • The CSS for the class

.beauty-blue { color: blueviolet; }

  • The Javascript script with jQuery After function.
  • We select all P and we add a paragraph after.


  • With a callback

$('p').after( function() {
  if (this.className != ""){
      return "<div>The class name of the previous element is " + this.className + "</div>";
  } else {
     return "<div>The previous element has no class name</div>";

  • The result:

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap