JSFiddle - React, Tailwind, and code Playground
HTML
<div id="root">
<input id="addForm" type="button" value="añadir formulario" class="1"/>
</div>
<!--
LECTURA:
http://www.librosweb.es/ajax/capitulo4/html_y_dom.html
http://www.librosweb.es/ajax/capitulo6/handlers_y_listeners.html
-->
CSS
form, input[type="button"]{
padding:1em;
}
form{
background: whitesmoke;
margin:1em 0;
}
fieldset{
border: 1px dotted gray;
padding:1em;
margin: 1em 0 0 0;
}
JavaScript
//creamos algunas funciones para no escribir tanto codigo repetitivo.
function s(select){
return document.getElementById(select);
}
function add(elemento, identificador, padre, texto){
var elem = document.createElement(elemento);
var text = document.createTextNode(texto);
elem.id = identificador;
elem.appendChild(text);
padre.appendChild(elem);
}
function remove(elemento){
elemento.parentNode.removeChild(elemento);
}
//manos a la obra:
window.onload = function(){
s("addForm").addEventListener("click", function(){
if(this.className == 1){
add("form", "form", s("root"), "");
add("input", "addBlock", s("form"), "");
s("addBlock").type = "button";
s("addBlock").value = "añadir bloque";
s("addBlock").className = 1;
this.className = 0;
this.value = "quitar formulario";
s("addBlock").addEventListener("click", function(){
if(this.className == 1){
this.className = 0;
this.value = "quitar bloque"
add("fieldset","block",s("form"),"");
add("legend","legend1",s("block"),"bloque");
add("span","span1",s("block"),"... elementos de formulario ...");
}
else{
remove(s("block"));
this.className = 1;
this.value = "añadir bloque"
}
}, false);
}
else{
remove(s("form"));
this.className = 1;
this.value = "añadir formulario";
}
}, false);
}