want to convert render html to nunjucks with variable and every thing - nunjucks

Question

becuase i want to manuplate/add some html tags after html render and save into nunjucks (like before rendering);
nunjucks before render
<div class="ps-4">
<h1>{{heading}}</h1>
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
nunjucks after render and html modification
<div class="ps-4">
<h1>hello world</h1>
<img src="abc.png" />
<div class="px-4">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
</div>
</div>
and i want it like that
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
please solve and suggest any way to do this thing pleassssss

Answer 1

If you want the output to look like the original nunjucks logic you typed in, then you can try the following technique. On your HTML template within your nunjucks project...
<pre>
<code>
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
</code>
</pre>