Add constructs a new element at the specified location in the document.


        
          list item 1
          list item 2
          list item 3
        
        a paragraph
        
        $('li').add('new paragraph')
        .css('background-color', 'red');

test.html


        
          
          
            Hello
            Hello Again

test.php


      require_once 'QueryPath.php';

      htmlqp('test.html')
      $qp->append('new paragraph')
         ->find('p')
         ->css('background-color', 'red')
         ->top()
         ->writeXHTML();

It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements. More than one class may be added at a time, separated by a space, to the set of matched elements. This method is often used with .removeClass() to switch elements' classes from one to another.


        $('p').addClass('myClass yourClass');

        $('p').removeClass('myClass noClass').addClass('yourClass');

        $('ul li:last').addClass(function() {
          return 'item-' + $(this).index();
        });

Given an unordered list with five li elements, this example adds the class "item-4" to the last li. test.html


        
          
          
            Hello
            Hello Again

test.php


      require_once 'QueryPath.php';

      htmlqp('test.html')
      $qp->append('')
         ->find('div')
         ->addClass('testing one two three')
         ->top()
         ->writeXHTML();

The selector expression preceding the method is the container after which the content is inserted. This method is often used with .removeClass() to switch elements' classes from one to another.


      
        Greetings
        Hello
        Goodbye
      
      We can create content and insert it after several elements at once:
      $('.inner').after('Test');
      We can also select an element on the page and insert it after another:
      $('.container').after($('h2'));
      .after() will also work on disconnected DOM nodes. For example, given the following code:
      $('

').after('');

test.html


        
          
          
            Hello
            Hello Again

test.php


      require_once 'QueryPath.php';

      htmlqp('test.html')
      $qp->append('First P
Second P')
         ->children('p')
         ->after('new paragraph')
         ->top()
         ->writeHTML();


      
        Greetings
        Hello
        Goodbye

test.html


        
          
          
            Hello
            Hello Again

test.php


      require_once 'QueryPath.php';

      htmlqp('test.html')
      $qp->append('First P
Second P')
         ->children('p')
         ->after('new paragraph')
         ->top()
         ->writeHTML();

Add a yellow background to a span and to all of the children of an element.


        
          
            
            
          
          
            Hello
            Hello Again
            
              I
              II
                
                  A
                  B
                    
                      1
                      2
                      3
                    
                  
                  C
                
              
              III

test.html


        
          
          
            Hello
            Hello Again

test.php


      require_once 'QueryPath.php';

      htmlqp('test.html')
        ->find('span')                  // Point querypath to the span
        ->css('background', 'yellow')   // Add the CSS
        ->top()                         // Point QueryPath to the top of the page
        ->writeXHTML();                  // Write HTML, notice it does not use print