Как включить CSS-стиль а JavaScript?

Question

[Кирилл Красин]

Здравствуйте. Подскажите каким образом включить в JavaScript CSS-стиль и фрагмент HTML кода.
Цель:
Написать небольшой скрипт, который будет вызываться на внешнем сайте с указанием ID

И в указанный DIV, подгружать содержимое со стилем (Кнопка для перехода на сайт голосования).
Заранее спасибо.

Answer 1

[Stalker_RED]

Далеко не на всех сайтах есть jQuery, так что лучше на ванильном js

(function(){
  var cont = document.querySelector('#yourId');
  cont.innerHTML = '<button>go!</button>';
  cont.style.color = 'red';
  cont.style.outline = 'dashed 2px green';
})()

Answer 2

[Boris Köln]

Правильный вариант:
document.getElementById + для всех элементов формы .createElement/.appendChild/.style

Говнокод:
document.getElementById + .innerHtml со всем HTML/CSS

Подробнее см. javascript.ru/tutorial/dom

Comments

[Kovalsky]

Не-а

[Boris Köln]

Качество кода оценивается по понятности и легкости поддержки, а не по производительности

[Kovalsky]

Boris Korobkov: что может быть понятней и проще для редактирования чем строка HTML

Answer 3

[Илья Караваев]

Как я понял Ваш вопрос, Вам не нужно подгружать в div ваш css, достаточно внедрить стиль правильным способом:

var first = document.getElementsByTagName("script")[0],
      script = document.createElement("script");
      script.type = "text/javascript";
      script.async = true;
      script.src = "https://yousite.ru/path/to/scripts/scrpt.js";
     first.parentNode.insertBefore(script, first);

Как то так.

Comments

[Boris Köln]

Речь про подключение css, а не js. Тогда уж создавать надо link rel="stylesheet" type="text/css" href="..."

Но делать лишний http запрос ради крошечного файла - неэффективно.

[Илья Караваев]

Boris Korobkov: смысл от этого не меняется. Просто чаще это используется для js.
Делать лишний запрос единожды (все css и js кэшируются браузером) более эффективно, чем каждый раз создавать css на стороне клиента. Или я где-то прогулял тему кэширования барузером?