appent, appendTo, prepend, prependTo

by Juri Rudi

HTML

<ol id="lista1">
 <li>Voce 1</li>
</ol>
<button id="aggiungi_elemento_dopo">append</button>
<button id="aggiungi_elemento_prima">prepend</button>
<p id="paragrafo1">Paragrafo 1</p>
<button id="aggiungi_elemento_dopo2">appendTo</button>
<button id="aggiungi_elemento_prima2">prependTo</button>


<h3>Legenda:</h3>
<ul>
<li><mark>A.append(B)</mark> <span>aggiunge B a A</span> <i>(dopo)</i></li>
<li><mark>A.appendTo(B)</mark> <span>aggiunge A a B</span> <i>(dopo)</i></li>
<li><mark>A.prepend(B)</mark> <span>aggiunge B a A</span> <i>(prima)</i></li>
<li><mark>A.prependTo(B)</mark> <span>aggiunge A a B</span> <i>(prima)</i></li>
</ul>

CSS

button {
  width:110px;
}

ul {
  list-style: none;
  line-height: 20px;
}

span {
  margin-left: 15px;
  letter-spacing: 2px;
}

JavaScript

var num_dopo = 2;
$("#aggiungi_elemento_dopo").click(function(){
  $("#lista1").append("<li>nuovo elemento "+num_dopo+"</li>");
  num_dopo++;
})

var num_prima = 0;
$("#aggiungi_elemento_prima").click(function(){
  $("#lista1").prepend("<li>nuovo elemento "+num_prima+"</li>");
  num_prima--;
})

var num_dopo2 = 2;
$("#aggiungi_elemento_dopo2").click(function(){
  $("<p>nuovo paragrafo "+num_dopo2+"</p>").appendTo("#paragrafo1");
  num_dopo2++;
})

var num_prima2 = 0;
$("#aggiungi_elemento_prima2").click(function(){
  $("<p>nuovo paragrafo "+num_prima2+"</p>").prependTo("#paragrafo1");
  num_prima2--;
})