Print html instead of plain text

Question

Hello Im trying to print html code , and iframe to be more precise. when I add my html Iframe code it prints but plain text . I would like to see the actual Iframe with content. Thank you

<script>
const messages = ['<iframe src="https://stvkr.com/v2/click-Aw0XO-8X5JXO-rJ2rv-d6edfeee2?tl=1"></iframe>', '<iframe src="https://stvkr.com/v2/click-Aw0XO-8X5JXO-rJ2rv-wwwwwedfd12?tl=1"></iframe>' , '<iframe src="https://stvkr.com/v2/cliedAw0XO-8X5JXO-rJ2rv-d6edfd12?tl=1"></iframe>'];
let cnt = 0;
const show = () => {
    if (cnt >= messages.length) return;
    document.body.append(document.createTextNode(messages[cnt]));
    cnt++;
};
setInterval(show,2000)

</script>

Put the code you want to print into a `
` element and print the contents of that. Or, set the HTML you want to print into an element using `.textContent`. — Scott Marcus, Jan 03 '23 at 21:37
I am not very familiar with Javascript, I found this code online , and its exaclty what I want to accomplish but with Iframes — Mamadona, Jan 03 '23 at 21:44

score -1 · Answer 1 · answered Jan 03 '23 at 21:47

-1

You can try one of these:

This one uses innerHTML on body so it can break things:

const messages = ['<iframe src="https://stvkr.com/v2/click-Aw0XO-8X5JXO-rJ2rv-d6edfeee2?tl=1"></iframe>', '<iframe src="https://stvkr.com/v2/click-Aw0XO-8X5JXO-rJ2rv-wwwwwedfd12?tl=1"></iframe>', '<iframe src="https://stvkr.com/v2/cliedAw0XO-8X5JXO-rJ2rv-d6edfd12?tl=1"></iframe>'];
let cnt = 0;
const show = () => {
  if (cnt >= messages.length) return;
  document.body.innerHTML += messages[cnt];
  cnt++;
};
setInterval(show, 100)

This one wraps iframes in divs so it's not perfect either:

const messages = ['<iframe src="https://stvkr.com/v2/click-Aw0XO-8X5JXO-rJ2rv-d6edfeee2?tl=1"></iframe>', '<iframe src="https://stvkr.com/v2/click-Aw0XO-8X5JXO-rJ2rv-wwwwwedfd12?tl=1"></iframe>', '<iframe src="https://stvkr.com/v2/cliedAw0XO-8X5JXO-rJ2rv-d6edfd12?tl=1"></iframe>'];
let cnt = 0;
const show = () => {
  if (cnt >= messages.length) return;
  const div = document.createElement('div')
  div.innerHTML = messages[cnt];
  document.body.append(div);
  cnt++;
};
setInterval(show, 100)

answered Jan 03 '23 at 21:47

Konrad

21,590
4
28
64

`.innerHTML` should be avoided whenever possible. If you were to have `document.body.innerHTML...` it would obliterate every event handler within the `body` that was added with `.addEventListener()`. – Scott Marcus Jan 03 '23 at 21:49
@ScottMarcus you are right. I would like to use `document.createElement('empty element')` but it's not an option I guess. Any idea how to append without a wrapper? – Konrad Jan 03 '23 at 21:51
Appending with `.append()` is the preferred way. I don't know what you mean by `'empty element'`. – Scott Marcus Jan 03 '23 at 21:54
`document.body.append('')` results in appending text, not html – Konrad Jan 03 '23 at 21:55
`document.body.append("
");` Or. create a new element and set the `.textContent` of that element to some HTML and then append that element to the `document`.
– Scott Marcus Jan 03 '23 at 21:56
@ScottMarcus it still is a text, not html – Konrad Jan 03 '23 at 22:00
`const div = document.createElement("div"); div.textContent = ""; document.body.append(div); ` – Scott Marcus Jan 03 '23 at 22:05
If you want the HTML to be parsed, then: `const frame = document.createElement("iframe"); frame.src = "https://example.com"; document.body.append(frame);` – Scott Marcus Jan 03 '23 at 22:09

Print html instead of plain text

1 Answers1