[javascript] jquery / javascript를 통해 <head>에 항목을 추가하는 방법은 무엇입니까?

<head>요소에 대한 HTML 소스 편집을 방지하는 CMS로 작업하고 있습니다.

예를 들어 <title>태그 위에 다음을 추가하고 싶습니다 .

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

답변

선택하여 정상적으로 추가 할 수 있습니다.

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

답변

자바 스크립트 :

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

DOM 요소를 다음과 같이 만드십시오.

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

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

답변

jQuery

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

자바 스크립트 :

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

답변

innerHTML추가 필드 문자열을 연결하는 데 사용할 수 있습니다 .

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

그러나 헤드에 추가 한 추가 항목이 첫 번째로드 후에 브라우저에서 인식된다는 것을 보장 할 수 없으며 추가 스타일 시트가로드 될 때 FOUC (스타일이 지정되지 않은 콘텐츠 플래시)가 표시 될 수 있습니다.

몇 년 동안 API를 살펴 보지 않았지만 document.write이러한 종류의 작업을 위해 설계된를 사용할 수도 있습니다 . 그러나 이렇게하려면 초기 AJAX 요청이 완료 될 때까지 페이지가 렌더링되지 않도록 차단해야합니다.

답변

최신 브라우저 (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);

답변

임시 요소 (예 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에 어떤 식 으로든 영향을주지 않습니다 .

참고 스크립트 스타일이 성공적으로 적용하는 동안이 방법으로 삽입 분명히, 자동으로 실행되지 않습니다. 따라서 스크립트를 실행해야하는 경우 Ajax를 사용하여 JS 파일을로드 한 다음 eval().

답변

순수한 자바 스크립트를 사용해보세요.

라이브러리 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'));