•  
     

Anexo ao Corpo - jQuery

Vamos anexar ao nosso bloco div a classe .list. Vamos anexar a um bloco <div> a classe class="item", uma vez que vamos querer um meio de selecionar nosso bloco <div> anexado quando formos removê-los. (Uma "lista de afazeres" não é uma boa lista se não pudermos remover as coisas que já fizemos.)

Vamos querer que o conteúdo do nosso bloco div seja o conteúdo do nosso campo de entrada, o qual salvamos na variável toAdd. O que significa que quando anexarmos, vamos querer anexar

Código: Selecionar todos

'<div class="item">' + toAdd + '</div>



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>
<h2>Teste</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br>
<div class="list"></div>
</body>
</html>


CSS

Código: Selecionar todos

h2 {
    font-family:arial;
}

form {
    display: inline-block;
}

#button{
    display: inline-block;
    height:20px;
	width:70px;
	background-color:#cc0000;
	font-family:arial;
	font-weight:bold;
	color:#ffffff;
	border-radius: 5px;
	text-align:center;
	margin-top:2px;
}

.list {
	font-family:garamond;
	color:#cc0000;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$('#button').click(function(){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
});
});


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