Edit in JSFiddle

var foo = document.getElementById("foo"),
    bar = document.getElementById("bar");

bar.addEventListener("click", function(){
    var p = document.createElement("p");
    p.innerText = "Texto de ejemplo";
    foo.appendChild(p);
    foo.lastChild.scrollIntoView();
}, false);

<button id = "bar">Añadir</button>
<div id = "foo">
    <p>Texto de ejemplo</p>
</div>

#foo{
    background: lightyellow;
    width: 15em;
    height: 5em;
    overflow: auto;
    border: .1em lightgray solid;
}

p{
    margin: 0;
}

p:nth-child(even){
    background: lightcyan;
    color: lightgreen;
}

p:nth-child(odd){
    background: lightgreen;
    color: lightcyan;
}