JSFiddle - React, Tailwind, and code Playground

by pepoflex

HTML

<div id="contenedor">
  <input id="unaCaja" type="text" placeholder="Ejemplo: 01">  
  <input id="unBoton" type="button" value="cliqueame!">
</div>
<!--<div id="resultadoTexto"></div>-->
  


<table>
    <thead>
		<tr>
			<th>Nombre</th>
            <th>Tipo</th>
            <th class="center">Eliminar</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		    <td>
              <div id="resultadoHTML"></div> 
            </td>
            <td>
              <div id="resultadoHTML2"></div> 
            </td>
            <td class="center">
              <div id="resultadoHTML3"></div>
            </td>
        </tr>
    </tbody>
</table>

CSS

#contenedor * {
  display: block;    
  margin: 20px;
  padding: 2px;
}

div {
  border-top: dashed 1px silver;
  border-bottom: dashed 1px silver;
  padding: 20px;
}

JavaScript

$("#unBoton").click(function() {
    var resultado = " ";
    var resultado2 = " ";
    var resultado3 = " ";
    
    resultado += "<input id='unaCaja' type='text' placeholder='Ejemplo: 01'>  " + $("#unaCaja").val();
    resultado2 += "<input id='unaCaja' type='text' placeholder='Ejemplo: 100'> " + $("#unaCaja").val();
    resultado3 += "<input id='unBoton' type='button' value='X'> " + $("#unaCaja").val();
    
    /*$("#resultadoTexto").text(resultado);*/
    $("#resultadoHTML").html(resultado);
    $("#resultadoHTML2").html(resultado2);
    $("#resultadoHTML3").html(resultado3);
});