Necesito poder inyectar código XHTML estático (que se extrae de una base de datos) y envolverlo alrededor de las etiquetas HTML existentes.
PÁGINA HTML:
<html> <head><head> <body> <div> <!-- Top half of XHTML wrapper goes here //--> <p>Inner Content Here</p> <!-- etc. ---> <p>More Inner Content</p> <!-- Bottom half of XHTML wrapper goes here //--> </div> </body> </html> ENVOLTORIO XHTML DESDE LA BASE DE DATOS:
(este es contenido variable que proviene de otro sistema y es creado por el usuario)
Estos datos bajan a través de una cadena json. Necesito dividirme () en el marcador de posición "{{INNER_CONTENT_PLACEHOLDER}}" y luego envolver el contenido mencionado anteriormente. Puede haber MUCHO más código contenedor del que he mostrado aquí en mi
<div class="myCustomBackground"> <h1 class="myCustomHeader">MyCompany, Inc.</h2> <div class="container-padding"> {{INNER_CONTENT_PLACEHOLDER}} </div> </div>¿Hay alguna manera de inyectar HTML sin que javascript cierre las etiquetas para que la inyección de la mitad inferior pueda ser las etiquetas de cierre?
Si agrega un atributo de identificación al envoltorio externo:
<html> <head><head> <body> <div id="outerdiv"> <!-- Top half of XHTML wrapper goes here //--> <p>Inner Content Here</p> <!-- etc. ---> <p>More Inner Content</p> <!-- Bottom half of XHTML wrapper goes here //--> </div> </body> </html>y también el acolchado interior:
<div class="myCustomBackground"> <h1 class="myCustomHeader">MyCompany, Inc.</h2> <div class="container-padding" id="innerdiv"> {{INNER_CONTENT_PLACEHOLDER}} </div> </div>entonces debería poder seleccionar el contenido en una variable y luego reemplazar el contenido con el contenedor de la base de datos, y finalmente insertar el contenido de la variable en el contenedor interno:
var outer = document.getElementById('outerdiv'); var content = outer.innerHTML; outer.innerHTML = dbstuff; var inner = document.getElementById('innerdiv'); inner.innerHTML = content;