JavaScript - Duda para incluir un html externo en un div

Buenos días.

Tengo un proyecto de web que es una especie de recetario de cocina. De tal manera que la página principal es la típica con su header, nav, aside y section. Desde el nav se despliegan menús para elegir receta, y esa receta se ve en el div section.

Bien, resulta que van a ser un montonazo de recetas, y todas son idénticas en cuanto a formato. 4 ó 5 párrafos, una tablita y alguna vez una foto o dos. Para "racionalizar" el invento, cada receta lleva unos include de php con la cabecera, menu, etc para no repetir todo el html en cada una. Hasta aquí bien. Pero tengo entendido que se puede incluir html externo en un div, en mi caso la section, de tal manera que cada recetaxx.html quedaría reducida a algo así como:

<article>
<p>Blablalalalal</p>
<p>Mas blablbabab</p>
...
...
</article>

De tal manera que quiero que al elegir una opción en el menu, en la section se coloque la recetaxx.html correspondiente. He probado con innerHTML, pero claro, tengo que poner todo el texto en el script, haciendo un montón de inners y no tener cada receta "archivada" en su correspondiente ficherito.html.

He probado lo siguiente:

elemento=document.getElementById...
elemento.innerHTML='<?php include("recetaxx.html"); ?>';

A ver si así hacía el include en el div. Pero no funciona. Imagino que porque simplemente esto de arriba es un sinsentido.

También he probado usando una pequeña función con Jquery.

Así que mi pregunta es: ¿Cual es el mejor método para hacer lo que quiero?. ¿Es posible desde Javascript sin involucrar a Jquery (que en toda la web no lo usaría más que para esto)?. O tengo que usar PHP (que no conozco de momento apenas) y "mezclarlo" con Javascript?

Gracias de antemano.

Hola Nemesis, según entiendo tus comentarios, tendrás que utilizar ajax, no?

No se si esto es lo que estas buscando:
http://www.lawebdelprogramador.com/codigo/JQuery/2136-Cargar_paginas_dentro_de_un_div_con_jquery.html

Coméntanos, ok?

¡¡Efectivamente!!

Ya había encontrado una solución tal que así (con Jquery):

function cargarRecetas(urlDatos) //Usa jquery
{
$.get(urlDatos, function(data)
{$('#contenido').html(data);});
}

pero veo que la solución dada:

function cargarContenido(pagina)
{
// cargamos la pagina pagina.html en el div contenido
$("#contenido").load(pagina);
}

todavía es más sencilla. Y esta última, supongo que también vale para cargar un web externa entera.

Muchísimas gracias!.

Pues ahora me pasa una cosa curiosa.

Visto el método anterior, he pensado sustituir los include de php que hago en el html principal para la cabecera, menu, lateral, etc con .load desde el script principal, en window.onload. Así quitaba el php de enmedio, por lo menos hasta que empiece con la base de datos (así a ojo, unos 10 días).

Pues resulta que solo carga uno, la cabecera, el resto no hace caso, así que he vuelto a los include de php, y usar $().load para la section contenido.

La cabecera.html es un simple H1, el menu es una ul con sus li y sus ul y li desplegables. El aside son tres o cuatro divs. Y como digo funciona perfectamente con include.

Pero si hago en el script:

window.onload=function()
{
$("#cabecera").load("cabecera.html");
$("#menuprincipal").load("menuprincipal.html");
$("#herramientas").load("herramientas.html");
$("#contenido").load("recetaxxx.html");
}

solo funciona el primero, cabecera, y la section con la receta, en cuanto añado los otros dos, menuprincipal y herramientas, no funciona ninguno. Si dejo solo la cabecera y el contenido con $.load, y menuprincipal y herramientas con include de php, funciona.

¿Alguna razón para ello?