No usen tanto innerHTML. Ni tanto javascript inline. Hay otras formas que pueden ser más adecuadas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejemplo</title>
</head>
<body>
<!-- Botón de ejemplo -->
<button type="button" id="miBotonConEsteId">Ejemplo</button>
<!-- Div en el que tener agrupado el código generado por javascript. -->
<div class="codigoDinamico">
</div>
<!-- Codigo javascript -->
<script>
/* Usa el modo stricto para que me avise de
fallos como olvidar var o asignar un valor a
una constante o a una propiedad de solo lectura. */
"use strict";
/* variable para contar las pulsaciones. */
var i = 0;
/* Obtener el elemento por selector de css.
El # sirve para seleccionar por id.
El operador punto para encadenar métodos.
El addEventListener permite añadir escuchadores
de eventos sin sobrescribir los ya existentes.
"click" es el tipo de evento que queremos escuchar.
function() { } es una función anónima utilizada para
encapsular la expresión. Esto permite utilizar múltiples
expresiones y previene su ejecución fuera del evento. */
document.querySelector("#miBotonConEsteId").addEventListener("click", function() {
/* Se creará y retornará un nuevo elemento HTML en base al string. Que se guarda en la variable. */
var miDiv = document.createElement("div");
var miBoton = document.createElement("button");
/* Se debe preferir siempre innerText, createElement, append/prependChild, createTextNode,
createElement("textarea").value, etc sobre innerHTML y similares. No es lo mismo añadir tu
una etiqueta y un TEXTO del usuario, que añadir CODIGO del usuario. De todas formas añadiendo
TEXTO del usuario, es posible que el usuario consiga ejecutar código. Véase XSS, HTMLi, IDOR, ... */
/* Añade texto al botón. */
miBoton.innerText = "Hazme Click!";
/* Añade atributo id al botón. */
miBoton.id = "botonHazmeClick";
/* Añade atributo clase al botón */
miBoton.className = "botonesCreadosConJavascript";
/* Añade color de texto al botón. Mejor usar un archivo .css
externo para reusar código entre varias páginas (reduce tamaño del proyecto)
y para mejorar la seguridad del código. */
miBoton.style.color = "coral";
/* Añade un escuchador de eventos al botón. */
miBoton.addEventListener("click", function() {
/* Muestra un alert cuando se pulse el botón. */
alert("Me hiciste click!");
/* Cambia el fondo del botón cuando se pulse el botón. */
miBoton.style.backgroundColor = "#000";
/* Si i es valor verdadero, true, 1, texto, o más (se inicializó asignándole 0 en el principio del script)
entonces oculta el botón. En caso contrario, suma 1 para que si valia 0 ahora valga uno.
El resultado de forma resumida es que la segunda vez que se pulse el botón se oculte.
Esta expresión equivale a un if(i==1) { oculta el botón } else { i = i + 1 }; Se llama operador terciario o ternario
por las 3 expresiones CONDICIÓN ? SI_SE_CUMPLE_PASA_ESTO : SI_NO_SE_CUMPLE_PASA_ESTO_OTRO ; */
i ? miBoton.style.display = "none" : ++i;
}/* Se cierra la función anónima.*/ );/* Se cierra los paréntesis de los parámetros del metodo addEventListener. */
/* Mete el nuevo elemento botón dentro del nuevo elemento div. */
miDiv.appendChild(miBoton);
/* Mete el div que contiene el botón dentro del div con class="codigoDinámico" */
document.querySelector(".codigoDinamico").appendChild(miDiv);
});
</script>
</body>
</html>