Как скрыть блок из исходного кода страницы, но чтобы его содержимое отображалось в браузере?

Question

[Alex733]

Здравствуйте. Есть ли возможность скрыть содержимое блока div из исходного кода страницы, но при этом чтобы его содержимое отображалось в браузере?
Искал подобный пример, что-то похожее нашел здесь:
rosserial.be / 5635-kolledzh-serial-na-sts-2021.html

Если посмотреть в исходном коде страницы, то блок не содержит iframe с плеером, но при этом он отображается на странице в браузере, при нажатии на странице "Посмотреть код элемента" этот блок содержит iframe с плеером.

Подскажите, пожалуйста, можно ли реализовать у себя на сайте что-то подобное? Чтобы содержимое блока не отображалось в исходном коде, но при этом отображалось на странице в браузере?

Answer 1

[Алексей Ярков]

Достаточно построить DOM страницы с помощью JavaScript и магия случится.
Так работают все популярные фронтенд-фреймворки (React, Vue, Angular и т.п.).

Comments

[Alex733]

Спасибо за ответ. Можете, пожалуйста, привести пример, или как сделать это у себя на сайте? Я просто раньше такого не делал.

[Алексей Ярков]

Alex733, открываем гугл и пишем туда: javascript добавить элемент на страницу

Не вижу смысла копипастить ))

Answer 2

[Александр]

Добавляете нужный блок через JS после загрузки страницы.

Comments

[Alex733]

Спасибо за ответ. А как это реализовать на JS. Можете, пожалуйста, привести пример такого js?

[Александр]

Alex733,

window.addEventListener('DOMContentLoaded', () => {
    const element = document.createElement('div');
    element.textContent = 'New element';
    document.body.append(element);
});