Как передать нестроку в innerHTML
Я использую django, в основном я пытаюсь изменить часть html кода с помощью javascript.
приведенный ниже график работает хорошо
<div id='treemap_charts'>
{{ treemap_code.first.treemap_price_difference_yesterday|safe }}
</div>
с конечным результатом
<div id='treemap_charts'>
HTML code
</div>
Однако, когда я добавил немного javascript для изменения содержимого внутри div id='treemap_charts', как показано ниже:
<script>
document.addEventListener('DOMContentLoaded', function(){
document.querySelector("#treemap_options").onchange = function() {
if (this.value==='day') {
document.querySelector('#treemap_charts').innerHTML='{{treemap_code.first.treemap_price_difference_yesterday}}';
}
else {
document.querySelector('#treemap_charts').innerHTML='{{treemap_code.first.treemap_price_difference_month}}';
}
}
});
</script>
<div>
<select id='treemap_options' name='Treemap Charts'>
<option value='day' selected>1 Day Performance</option>
<option value='week'>1 Week Performance</option>
</select>
</div>
<div id='treemap_charts'>
{{ treemap_code.first.treemap_price_difference_yesterday|safe }}
</div>
результат HTML заканчивается как строка вместо кода HTML
<div id='treemap_charts'>
"HTML code"
</div>
PS:Я пытаюсь использовать этот код, но он не работает
<script>
document.addEventListener('DOMContentLoaded', function(){
document.querySelector("#treemap_options").onchange = function() {
if (this.value==='day') {
document.querySelector('#treemap_charts').innerHTML='{{treemap_code.first.treemap_price_difference_yesterday|safe}}';
}
else {
document.querySelector('#treemap_charts').innerHTML='{{treemap_code.first.treemap_price_difference_month|safe}}';
}
}
});
</script>
Есть идеи, как я могу передать {{ treemap_code.first.treemap_price_difference_yesterday|safe }} в div без изменения его в строку? Я ищу по всему форуму, но, похоже, не могу найти ответ, но одно я узнал - по крайней мере в HTML нужно иметь |safe, иначе это не будет работать...