I need to be able to inject static XHTML code (that's being pulled from a database) and wrap it around existing HTML tags.
HTML PAGE:
<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>
XHTML WRAPPER FROM DATABASE:
(this is variable content that comes from another system and is user created)
This data comes down via json string. I needs to be split() on the "{{INNER_CONTENT_PLACEHOLDER}}" placeholder and then wrapped around the content noted above. There can be a LOT more wrapper code than I've shown here in my
<div class="myCustomBackground">
<h1 class="myCustomHeader">MyCompany, Inc.</h2>
<div class="container-padding">
{{INNER_CONTENT_PLACEHOLDER}}
</div>
</div>
Is there a way to inject HTML without the javascript closing the tags so that they bottom half injection can be the closing tags?
If you add an id attribute to the outer wrapper:
<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>
and also the inner padding:
<div class="myCustomBackground">
<h1 class="myCustomHeader">MyCompany, Inc.</h2>
<div class="container-padding" id="innerdiv">
{{INNER_CONTENT_PLACEHOLDER}}
</div>
</div>
then you should be able select the content into a variable and then replace the content with the wrapper from the database, and finally insert the content from the variable into the inner wrapper:
var outer = document.getElementById('outerdiv');
var content = outer.innerHTML;
outer.innerHTML = dbstuff;
var inner = document.getElementById('innerdiv');
inner.innerHTML = content;