jQuery - Dom Manipulation

Articles Related

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.

$('p').after('<div>After</div>');

• 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: