lo que quiero hacer y estoy algo confundido, es separar en archivos elementos HTML que tienen eventos y funciones propias y poder cargarlo en un nuevo archivo cuando el usuario realice un clic.
por ejemplo tengo un archivo solo con este codigo:
formulario1.html:
<div>
<form id="form1">
<input type="number" id="number1">
<button id="btn1" onclick="f1()" >calcular</button>
</form>
</div>
<script>
function f1(){
let cadena="usuario"+document.getElementById("numnber1") ;
return cadena;
}
</script>
y desde otro archivo quiero que se inserte todo su contenido y las funciones que tenga en otro contenedor de otra pagina: archivo: editor.html:
<html><head><body>...
<div>
<button id="btnCargar1" onclick="cargar('formulario1.html')">Cargar Formulario</button>
<button id="btnCargar2" onclick="cargar('tabla1.html')">Cargar tabla</button>
<button id="btnCargar3" onclick="cargar('imagenes1.html')">Cargar imagen</button>
<div id="contenedor1"></div>
</div>
<script>
function cargar(archivo){
let contenedor= document.getElementById("contenedor1");
contenedor.innerHTML=""; //limpio
contenedor.innerHTML= //contenido del archivo formulario1.html
}
</script>
Con php logro que se visualice por medio de "include", pero en este caso necesito hacerlo con javascript y lo que he podido ver con el import de JS es que traigo las funciones pero no el html, cualquier recomendación me serviria :D