Как добавить что-нибудь в <head> через jquery/javascript?

Работа с CMS, которая препятствует редактированию источника HTML для элемента <head>.

Например, я хочу добавить следующее выше тег <title>:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Ответ 1

Вы можете выбрать его и добавить к нему как обычно:

$('head').append('<link />');

Ответ 2

JavaScript:

document.getElementsByTagName('head')[0].appendChild( ... );

Создайте элемент DOM следующим образом:

link=document.createElement('link');
link.href='href';
link.rel='rel';

document.getElementsByTagName('head')[0].appendChild(link);

Ответ 3

JQuery

$('head').append( ... );

JavaScript:

document.getElementsByTagName('head')[0].appendChild( ... );

Ответ 4

В последних браузерах (IE9 +) вы также можете использовать document.head:

Пример:

var favicon = document.createElement('link');
favicon.id = 'myFavicon';
favicon.rel = 'shortcut icon';
favicon.href = 'http://www.test.com/my-favicon.ico';

document.head.appendChild(favicon);

Ответ 5

Вы можете использовать innerHTML, чтобы просто выполнить дополнительную строку поля;

document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet>...'

Однако вы не можете гарантировать, что дополнительные вещи, которые вы добавляете в голову, будут распознаны браузером после первого загружаемого файла, и, возможно, вы получите FOUC (флеш неровного содержимого) при загрузке дополнительных таблиц стилей.

Я не смотрел API за многие годы, но вы также можете использовать document.write, что и было создано для этого типа действия. Тем не менее, это потребует, чтобы вы заблокировали страницу от рендеринга до тех пор, пока ваш первоначальный запрос AJAX не завершится.

Ответ 6

Создайте временный элемент (e. & thinsp; g. DIV), присвойте HTML-код (полученный через Ajax) его свойству innerHTML, а затем добавьте его дочерние узлы в элемент HEAD один за другим, Например, например:

var code = '<link rel="stylesheet" href="example.css" />'
         + '<script src="foobar.js"><\/script> ';

var temp = document.createElement('div');
temp.innerHTML = code;

var head = document.head;

while (temp.firstChild) {
    head.appendChild(temp.firstChild);
}

По сравнению с просто переписыванием всего содержимого HEAD через его innerHTML, это никак не повлияет на существующие дочерние элементы элемента HEAD.

Обратите внимание, что скрипты, вставленные таким образом, по-видимому, не выполняются автоматически, а стили применяются успешно. Поэтому, если вам нужны сценарии, которые нужно выполнить, вы должны загрузить JS файлы с помощью Ajax, а затем выполнить их содержимое с помощью eval().

Ответ 7

Попробуйте javascript pure:

Библиотека JS:

appendHtml = function(element, html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    while (div.children.length > 0) {
        element.appendChild(div.children[0]);
    }
}

Тип: appendHtml(document.head, '<link rel="stylesheet" type="text/css" href="http://example.com/example.css"/>');

или jQuery:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'http://example.com/example.css'));

Ответ 8

С jquery у вас есть другой вариант:

$('head').html($('head').html() + '...');

в любом случае он работает. Другой вариант JavaScript сказал, что это тоже правильно.