Додавання контенту в інші елементи документу

.append('content') - в середину блока додає контент, після вже існуючого там
.prepend('content') - в середину блока додає контент, перед вже існуючим там
.appendTo('селектор') - додає контент в елементи зазначені в селекторі, після вже існуючого там
.prependTo('селектор') - додає контент в елементи зазначені в селекторі, перед вже існуючим там
.before('content') - перед елементами набору додає контент
.after('content') - після элементів набору додає контент
.insertBefore('селектор') - вирізає всі елементи набору і додає їх перед зазначеними в селекторі
.insertAfter('селектор') - вирізає всі елементи набору і додає їх після зазначених в селекторі

Приклади

В середину блока додає контент, після вже існуючого там

$('#btn1').click (function(){
	    $('#ap').append('<br/><span>новий контент після </span>');
});

В середину блока додає контент, перед вже існуючим там

$('#btn2').click (function(){
	    $('#pr').prepend('<span>новий контент перед </span><br/>');
});

Додає контент в елементи зазначені в селекторі, після вже існуючого там

$('#btn3').click (function(){
	    $('<br/><span>новий контент після </span>').appendTo('#att');
});

Додає контент в елементи зазначені в селекторі, перед вже існуючим там

$('#btn4').click (function(){
	    $('<br/><span>новий контент після </span>').prependTo('#atp');
});

Перед елементами набору додає контент

$('#btn5').click (function(){
	    $('#bf h5').before('<span>новий контент перед заголовками</span>');
});

Після элементів набору додає контент

$('#btn6').click (function(){
	    $('#ba h5').after('<span>новий контент після заголовків</span>');
});

Вирізає всі елементи набору і додає їх перед зазначеними в селекторі

$('#btn7').click (function(){
	    $('.small').insertBefore('#ib span');
});

Вирізає всі елементи набору і додає їх після зазначених в селекторі

$('#btn8').click (function(){
	    $('.small2').insertAfter('#ia span');
});