BOM Test

Test the BOM in the middle of a document.

by pallxk

HTML

<script src="https://cdn.rawgit.com/linkedin/dustjs/master/dist/dust-core.js"></script>
<h1>BOM Test</h1>

<h2>With a BOM</h2>
<div id="with-bom"></div>

<h2>Without a BOM</h2>
<div id="without-bom"><p>This is a test template.</p></div>

CSS

div {
    border: 1px solid blue;
    padding: 2px;
}

p {
    border: 1px dashed yellowgreen;
    padding: 2px;
    margin: 0;
}

JavaScript

// Compiled dust template
// which comes from a file encoded in UTF-8-BOM
(function(dust){dust.register("test-template",body_0);function body_0(chk,ctx){return chk.w("<p>This is a test template.</p>");}body_0.__dustBody=!0;return body_0}(dust));

// Render the template and insert it into DOM
dust.render('test-template', {}, function(error, output) {
    document.getElementById('with-bom').innerHTML = output;
});

// Log the child nodes and see the difference
console.log(document.getElementById('with-bom').childNodes);
console.log(document.getElementById('without-bom').childNodes);