Inserindo Elementos - jQuery

Podemos inserir nossos elementos recém criados usando algumas ações em jQuery.

A ação .append() insere o elemento especificado como o último filho do elemento alvo. .prepend() insere o elemento especificado como o primeiro filho do elemento alvo. Se tivermos um bloco div de classe .info,

Código: Selecionar todos

$(".info").append("<p>Stuff!</p>");
$(".info").prepend("<p>Stuff!</p>");

irá adicionar um parágrafo com o texto "Stuff!" dentro de todos os blocos div da classe .info. .append() fará do parágrafo o último filho de cada bloco div; .prepend() will fará do parágrafo o primeiro filho de cada bloco div. (Nota: veja as Dicas se você estiver usando aspas simples.)

.appendTo() faz o mesmo que .append(), ela apenas reverte a ordem entre "o que adicionar" e "onde adicionar." O código

Código: Selecionar todos

$('<p>Stuff!</p>').appendTo('.info');

tem o mesmo efeito que o código .append() acima. .prependTo() tem um relacionamento similar ao de .prepend().

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>

JavaScript

Código: Selecionar todos

$(document).ready(function(){ 
$("body").append("<p>Eu sou um parágrafo!</p>");
});

Demo: http://jsfiddle.net/0ma7nkkL/1/