JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<form id="ejemplo">
    <label for="palabra">Escriba la palabra:</label>
    <input type="text" id="palabra" autofocus />
    <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>

CSS

table{
    border-collapse: collapse;
    margin-top: 1.5%;
}

table thead th, table tbody td{
    border-top: .1rem black solid;
    border-right: .1rem black solid;
}

table thead tr th:first-child, table tbody tr td:first-child{
    border-left: .1rem black solid;
}

table th, table td{
    border-bottom: .1rem black solid;
    text-align: center;
}

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);