$('element').attr('id', 'value');
$( ".inner" ).append( "<p>Test</p>" );
$( "p" ).add( "div" ).addClass( "widget" );
var pdiv = $( "p" ).add( "div" );
$( "li" ).add( "<p id='new'>new paragraph</p>" )
.css( "background-color", "red" );
var $newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
var pdiv = $( "p" );
pdiv.add( "div" ); // WRONG, pdiv will not change
$( "li" ).add( "p" ).css( "background-color", "red" );
$( "li" ).add( document.getElementsByTagName( "p" )[ 0 ] )
.css( "background-color", "red" );
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
$( ".container" ).append( $( "h2" ) );
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<p>a paragraph</p>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<h2>Greetings</h2>
</div>