Search code examples
pythonhtmlflaskmarkupjinja2

Markup() function returns markup outside of tags with Flask

Before I tell you my issue, I think it would be easier to show you my code.

HTML with Jinja

<p>{{ item }}</p>

'Flask

item = Markup('<ul><li>list item 1</li><li>list item 2</li></ul>')

My issue is, when the HTML page is loaded, the markup looks like this:

HTML when Page Loaded

<p></p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>

So as you can see, the contents of 'item' are not inside the paragraph tags as I specified in the HTML with Jinja. I've tried some workarounds but they are not any good. There is nothing else I can say other then I have no clue on how to solve this. Thanks.

Solution

  • <p> elements can't contain <ul> elements, so the browser places the list after the paragraph. If you need them to nest, replace <p> with <div>.