Заполните div с помощью html с помощью javascript/jquery

вот моя проблема:

У меня есть div:

<div id="legend"></div>

и я хочу заполнить его при определенных условиях с помощью этого другого кода:

<p>Showing results....
    Key:
    <img src="/....">&lt;=1
    &nbsp;<img src="/...">&lt;=2
    &nbsp;<img src="/...">&lt;=3
    &nbsp;<img src="/...">&lt;=4
    &nbsp;<img src="/...">&lt;=5

<p>

Как вы можете видеть, это легенда и основная проблема, я думаю, что у меня есть двойные кавычки, которые нельзя легко включить с помощью, например, решения здесь: Заполнить div текстом

Спасибо за вашу помощь!

Ответ 1

По моему мнению, вы пытаетесь сделать что-то вроде этого:

$("#legend").text("Your HTML here");

Чтобы вставить HTML, вы должны использовать .html(), ОДНАКО, было бы гораздо эффективнее использовать Vanilla JS так:

document.getElementById('legend').innerHTML = "Your HTML here";

Теперь у вас также есть проблемы с двойными кавычками. Ну, есть два возможных решения.

1: используйте одиночные кавычки вокруг строки: '<img src="/..." />'
2: Побег из кавычек: "<img src=\"/...\" />"

И еще одно: если эти новые строки на самом деле вставляются в ваш HTML, вы не можете иметь многострочную строку в JavaScript. У вас также есть два варианта:

1: выйдите из новой строки:

"<p>\
    Hello, world!\
</p>"

2: Конкатенация:

"<p>\n"
    +"Hello, world!\n"
+"</p>"

Ответ 2

Соберите свой html-код в переменной в соответствии с вашими условиями (чего мы не знаем), затем используйте html(), чтобы установить элемент.

var yourHtml = "your html";
$("#legend").html("yourHtml");

Что касается обработки кавычек, вы можете использовать одиночные кавычки в переменной, например:

var yourHtml = '<img src="/yourimgr.png">';

или вы можете избежать двойных кавычек:

var yourHtml = "<img src=\"/yourimgr.png\">";

Ответ 3

Сохраните ваш html-абзац в некоторой строке var str= <p>write your complete code here</p>
$('#legend').html(yourconditionSatisfies?str:'')