jquery/javascript를 통해 추가하는 방법은 무엇입니까?
CMS로 작업 중입니다. CMS는 다음에 대한 HTML 소스 편집을 방해합니다.<head>원소의
예를 들어, 위에 다음을 추가하고 싶습니다.<title>태그:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
일반적으로 선택하고 추가할 수 있습니다.
$('head').append('<link />');
JavaScript:
document.getElementsByTagName('head')[0].appendChild( ... );
DOM 요소를 다음과 같이 만듭니다.
const link = document.createElement('link');
link.href = 'href';
link.rel = 'rel';
document.getElementsByTagName('head')[0].appendChild(link);
jQuery
$('head').append( ... );
JavaScript:
document.getElementsByTagName('head')[0].appendChild( ... );
사용할 수 있습니다.innerHTML추가 필드 문자열을 조정합니다.
document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet>...'
그러나 머리에 추가한 내용이 첫 번째 로드 후 브라우저에서 인식된다는 보장은 없으며 추가 스타일시트가 로드되면 FOUC(스타일링되지 않은 내용의 플래시)가 표시될 수 있습니다.
몇 년 동안 API를 보지 못했지만, 이런 종류의 작업을 위해 설계된 것을 사용할 수도 있습니다.그러나 이렇게 하려면 초기 AJAX 요청이 완료될 때까지 페이지 렌더링을 차단해야 합니다.
최신 브라우저(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);
임시 요소를 만듭니다(예: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 파일을 로드한 다음 을 사용하여 해당 내용을 실행해야 합니다.
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'));
jquery에서는 다음과 같은 다른 옵션을 사용할 수 있습니다.
$('head').html($('head').html() + '...');
어쨌든 효과가 있습니다.다른 사람들은 자바스크립트 옵션이 맞다고 말했습니다.
언급URL : https://stackoverflow.com/questions/1900874/how-to-add-anything-in-head-through-jquery-javascript
'source' 카테고리의 다른 글
| 값 오류: 알 수 없는 투영 '3d' (0) | 2023.08.18 |
|---|---|
| addEventListener 및 getElementsByClassName을 사용하여 요소 ID 전달 (0) | 2023.08.18 |
| 새 창에서 링크를 열려면 어떻게 해야 합니까? (0) | 2023.08.18 |
| XMLHttpRequest Origin null은 파일:///(서버리스)에 대해 Access-Control-Allow-Origin이 허용되지 않습니다. (0) | 2023.08.18 |
| PowerShell 스크립트가 스케줄링된 작업을 통해 실행되지 않음 (0) | 2023.08.18 |