Как вывести теги в JS > или < вместо?

Question

[StaticArt]

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

Решил через API ipinfo.

Есть контейнер:

<div class="uae"> </div>

<script>
var el = document.querySelector('.uae');
var xhr =
	typeof XMLHttpRequest != 'undefined'
		? new XMLHttpRequest()
		: new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET', 'https://ipinfo.io/json', true);
xhr.responseType = 'json';
xhr.onreadystatechange = function() {
	if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			el.textContent = xhr.response.country == 'UAE' ? '<img src="/assets/img/logo/logo2.svg" alt="logo-img">' : '<img src="assets/img/logo/logo.svg" alt="logo-img">' ;
		}
	}
};
xhr.send();
</script>

И все бы хорошо, но <img src="/assets/img/logo/logo2.svg> выводится как текст, а не как IMG. Проблема что JS вместо знака < img > выводит символы & gt , как сделать чтобы JS выводил именно кавычки <> а не символ & gt , чтобы отображалось не как текст, а как html символ?

Comments

[Павел]

экранирование бро.

[StaticArt]

??? можно подробнее)

[Павел]

StaticArt, https://learn.javascript.ru/regexp-escaping
ну или charset=utf-8 +json гугли

[StaticArt]

Павел, Ну подскажи как экранировать <> чтобы они отображались как <>

[Lynn «Кофеман»]

Ну так а зачем ты его пихаешь в textContent?
Если уж хочется таких извращений, то есть innerHTML.

Answer 1

[Квазиморд Сидорович]

textContent для того и предназначен, чтобы там все было текстом. Если хотите получить действующий html-элемент - присваивайте в innerHTML.

el.innerHTML = xhr.response.country == 'UAE' ? '<img src="/assets/img/logo/logo2.svg" alt="logo-img">' : '<img src="assets/img/logo/logo.svg" alt="logo-img">' ;