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

102

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

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

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

— 지텐 드라 비야 스
소스

8

이것은 의미가 없습니다 ... 헤드는 자바 스크립트를 실행하기 전에 구문 분석됩니다. 자바 스크립트를 통해 머리에 메타 스텁을 추가하면 원하는 효과가 없습니다.

— Andre Haverdings 2009

1

@Mickel-네. 모든 질문에 대한 답변이 도움이됩니다.

— Jitendra Vyas

2

CMS 질문과 관련이 없지만 특정 상황에서 메타 태그를 추가하는 것이 합리적 일 수 있습니다. 정보를 수집하기 위해 메타 태그에있는 데이터를 사용하는 다양한 브라우저 애드온과 자바 스크립트 삽입이 있습니다. Facebook의 OpenGraph가 한 예입니다. 메타 태그를 헤드에 삽입하는 것은 CMS의 결함으로 인해 또는 자바 스크립트 애드온 / 삽입을 직접 작성하기 때문에 원본 HTML에 직접 액세스 할 수 없을 때 필요합니다.

— conceptDawg 2011 년

<meta>태그가 무엇이고 어떤 브라우저가 관련되어 있는지에 따라 태그를 동적으로 추가해도 효과가 없을 수 있습니다.

— Pointy

좋은 지적입니다. 문제에 너무 집중할 때 일어나는 일입니다. ;-)

— mb897038

149

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

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

— nickf
소스

2

나는이 링크가 배치됩니다 순서를 제어 할 수있는 방법

— Jitendra Vyas는

7

문서 읽기 : docs.jquery.com/Manipulation 것은 insertBefore , insertAfter당신이 원하는 것입니다.

— nickf

3

나는 이것을 document.ready에 넣었지만 내 머리 내용에 추가되지 않는다

— serpent403

링크를 추가하고 있지만 페이지 뷰 소스에 링크가 표시되지 않습니다 ... Firebug와 같은 브라우저 개발 도구에서 볼 수 있습니다. 소스보기에서도 링크를 볼 수 있습니까?

— Pankaj Tiwari

4

@PankajTiwari 코드가 원본 소스 (서버에서 제공 한)가 아닌 현재 문서에 추가하기 때문에 소스보기에서 볼 수 없습니다. 이것이 FireBug 및 Chrome Dev 도구가 매우 유용한 이유입니다.

— Bernhard Hofmann

129

자바 스크립트 :

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

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

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

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

— 조슈아 우드워드
소스

1

스크립트 요소와 함께 작동합니다!

— Ray Foss

26

jQuery

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

자바 스크립트 :

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

— 데이비드 헤드런드
소스

5

appendChild에 DOM 요소가 필요하지 않습니까? 즉. var elem = document.createElement () document.getElementsByTagName ( 'head') [0] .appendChild (elem);

— fredrik

2

그래. 나는 그것이 ...질문의 핵심 부분이라고 생각하지 않았기 때문에 그 부분을 남겼고 , 또한 글을 쓰는 시점에 그가 머리에 넣고 싶은 것에 대한 실습 예가 없었습니다. 하지만 예, DOM 요소 여야합니다.

— David Hedlund

10

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

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

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

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

— Jivings
소스

9

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

— 베니 노게 바우어
소스

9

임시 요소 (예 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().

— 마랏 타 날린
소스

그게 내가에서하는 방법 body이지만 head-tag 안에서 실제로 할 수 있습니까? 나는 인상 그에만 허용 태그 아래이었다 base, link, meta, title, style와 script?

— mb897038

AFAICT, Ajax 응답에 정확히 해당 요소가 있습니다. 그렇죠?

— Marat Tanalin

사실, 그러나 나는 여전히 head 태그 내부의 div로 작동하도록 만들 수 없습니다. Chrome은 어쨌든 본문에 div의 내용을 표시하기에 충분히 "스마트"한 것 같습니다.

— mb897038

2

아마도 답을주의 깊게 읽지 않았을 것입니다. ;-) DIV요소는 HTML 코드 구문 분석을 위한 임시 컨테이너입니다 . 당신은 삽입 안 DIV받는 그 자체를 HEAD. 하위 노드를 삽입해야합니다 . 답변에 추가 한 예를 참조하십시오.

— Marat Tanalin

1

@GaetanL. "요소 안에 자식 요소가있는 동안 temp." Node.firstChild () 문서를 참조하십시오 .

— Marat Tanalin

4

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

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

— KingRider
소스

-5

jquery를 사용하면 다른 옵션이 있습니다.

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

어쨌든 작동합니다. 다른 사람들이 말한 JavaScript 옵션도 맞습니다.

— 데이브
소스

2

그러면 기존 콘텐츠가 삭제되고 새 요소가 생성됩니다. 이로 인해 동적으로 설정된 DOM 속성이 손실되고 스크립트가 다시 실행되는 등 바람직하지 않은 부작용이 발생할 수 있습니다.

— Quentin

이러한 이유로 모든 DOM 속성을 복구하려면 $ ( 'head'). html () 전에 사용해야합니다

— Dave

1

사용 .html()하면 모든 DOM 속성이 복구되지 않습니다 . (이 문제의 가장 일반적인 인스턴스이자 가장 눈에 띄는 것은 유사한 코드를 사용하여 양식에 새 필드를 추가하는 경우입니다. value 속성은 필드의 기본값을 나타내므로 가져 html()오고 다시 설정하면 기존의 모든 항목이 재설정됩니다. 필드를 기본값으로 변경).

— Quentin

내 코드에서 테스트했으며 작동하고 모든 DOM 속성이 작동합니다. 직접 테스트 해보세요. IE11에서 작업 중입니다

— Dave

제거 될 수있는 것은 이벤트이기도합니다.

— Hydroper 2015-12-26