How to interpret HTML generated in PHP in a Magento 2 template

Question

It's difficult to explain with basic sentences so here the code :

template.phtml

<p id="text"><?php /* @escapeNotVerified */ echo __('Some text [[REPLACE]]') ?></p>

Javascript

var list = '<ul><li>A</li><li>B</li></ul>';
$("#text").text(function(index, text) {
    return text.replace("[[REPLACE]]", list);
});

Actual outcome

Some text <ul><li>A</li><li>B</li></ul>

Desired outcome

Some text

• A
• B

It seems that Magento 2 won't interpret HTML generated. Is there a way ?

Answer 1

As noted in the jQuery documentation for the .text() method it converts html elements into textual output.

To Quote:

The code $( "div.demo-container" ).text( "<p>This is a test.</p>" ); will produce the following DOM output:

<div class="demo-container">&lt;p&gt;This is a test.&lt;/p&gt;</div>

It will appear on a rendered page as though the tags were exposed, like this:

<p>This is a test</p>

If you wish to append html in this manner it looks like the .html() method is more what you're looking for.

Something like this should work:

var list = '<ul><li>A</li><li>B</li></ul>';
$('#text').html($('#text').html().replace('[[REPLACE]]', list));