Понимание того, как действительно работает декоратор [дубликат]

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

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

   var div = document.createElement('div');
   div.style.position = 'fixed';
   div.style.top = 0;
   div.innerText = 'more text';
   document.body.prepend(div);
   

   Конечно, вышеупомянутый способ займет некоторое время, чтобы напечатать его, и, следовательно, это не очень забавно. Вот ссылка на документацию для Node.innerText .
2. Тогда есть Element.innerHTML , упомянутый Vivek . Этот метод не является предпочтительным, поскольку он вытирает тело документа, чтобы вставить элемент. Который, если вы не слушаете события в очень специфическом ключе, вытирает их. Я не собираюсь так поступать, потому что он не подходит для этого ответа.
3. Наконец, есть другой способ; Element.querySelector() . Вы можете использовать этот метод для анализа HTML-кода, который вы пишете в виде строки, перед установкой в ​​нужную позицию. Пожалуйста, обратитесь к таблице поддержки внизу документации, чтобы узнать, поддерживается ли она в ваших целевых браузерах:

   var span = document.createElement('span');
   span.innerHTML = "
   more text
   ";
   var div = span.querySelector('div');
   document.body.prepend(div);
   

Демонстрация № 3:

var span = document.createElement('span');
span.innerHTML = "
more text
";
var div = span.querySelector('div');
document.body.prepend(div);