development

jquery / javascript를 통해 추가하는 방법은 무엇입니까?

big-blog 2020. 8. 27. 08:11
반응형

jquery / javascript를 통해 추가하는 방법은 무엇입니까?


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

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


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

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

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

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

I haven't looked at the API in years, but you could also use document.write, which is what was designed for this sort of action. However, this would require you to block the page from rendering until your initial AJAX request has completed.


Try a javascript pure:

Library JS:

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

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

or jQuery:

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

i don't know why i hate using jquery. i gave head an id of 'head'.

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

With jquery you have other option:

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

anyway it is working. JavaScript option others said, thats correct too.

참고URL : https://stackoverflow.com/questions/1900874/how-to-add-anything-in-head-through-jquery-javascript

반응형