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

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

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

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
9 81
javascript css jquery xhtml-1.0-strict

9 ответов:

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

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

JavaScript:

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

сделать элемент DOM так:

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

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

jQuery

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

JavaScript:

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

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

пример:

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);
7

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

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

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

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

6

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

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

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

var head = document.head;

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

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

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

6

попробуйте 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'));
2

Я не знаю, почему я ненавижу использовать jquery. я дал голову идентификатором 'голова'.

<head id="head">
<meta charset="utf-8">
 <title></title>
</head>




<script type="text/javascript">
    var head = document.getElementById('head');
    if (window.screen.width<800) {
      head.innerHTML = "  <link rel='stylesheet' href='../css/gallerys.css?ver=1.2'>";
    }else {
      head.innerHTML="<link rel='stylesheet' href='../css/gallerys.css?ver=1.3'>";
    }
</script>
0

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

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

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

-5