Search code examples
javascriptnunjucks

Nunjucks include is unexpectedly inserting text into DOM

I am using Nunjucks with Express and node.js. I am confused why Nunjucks causes text to be inserted into the DOM that shouldn't be present.

Example:

templates/test.html:

<div></div>

test.html:

{% include "templates/test.html" %}
<div>
    This is a test...
</div>

The source generated is as expected:

<div></div>
<div>
    This is a test...
</div>

However it doesn't render as I would expect. When inspecting the DOM:

""
<div></div>
<div>
    This is a test...
</div>

As expected if I remove the "" from the DOM using developer tools it renders as I would expect.

If anyone explain this and suggest a way to prevent it happening I would appreciate it.

Thanks in advance...

Solution

  • The OP solved it himself/herself:

    Typically I have already worked out the answer ;)

    Nunjucks whitespace control using '-':

    {%- include "templates/test.html" -%}

    This strips whitespace before and after.

    (I couldn't answer my own question due to being a new SO user)