jQuery append example

Método append jquery

by NunoMira

HTML

<div>
		<label>Insere aqui o teu nome:</label>
		<input id="nome" type="text">
</div>

<br>

<div>
	<label>Insere aqui o teu clube:</label>
	<input id="clube" type="text">
</div>

<br>

<div>
  <button>Adicionar linha com informação</button>
</div>

<br>
<br>

<div style="border: 1px solid red">
	<label style="margin-bottom: 6px;">Resultado:</label>
	<div id="final">
	</div>
</div>

JavaScript

// handle click
$("button").on("click", function()
{
		var nome = $("#nome").val();
		var clube = $("#clube").val();
		
		var htmlLineStr = '<div style="border: 1px solid black; width: 300px; height: 21px; margin-bottom: 4px;">'+nome+' é do '+clube+'</div>';
		
		$("#final").append(htmlLineStr);
})