Añadir valores a una tabla cargada con un arraylist, dinamicamente?

[Alexis88]

Crea un pequeño formulario con el campo de texto:

Código HTML:

<form id="ejemplo">
    <label for="palabra">Escriba la palabra:</label>
    <input type="text" id="palabra" />
    <input type="submit" value="Añadir a la tabla" />
</form>
 
<table id="lista">
    <thead>
        <tr>
            <th>Palabras añadidas</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
 

Y añade la palabra escrita a la tabla cuando proceses el formulario:

Código Javascript:

document.querySelector("#ejemplo").addEventListener("submit", function(event){
    event.preventDefault(); //Cancelamos el envío de los datos para evitar que recargue la ventana
    
    var tbody = document.querySelector("#lista tbody"),
        input = document.querySelector("#palabra");
        
    tbody.insertAdjacentHTML("beforeend", "<tr><td>" + input.value + "</td><tr>");    
    input.value = "";
    input.focus();
}, false);
 

DEMO