데이터 속성에서 비동기로드 다중 JS는 정상입니까?

Question

나는 나의 사업부의 속성 내부의 여러 JS 파일을 넣어 한 다음 그것은 작동

<div id='asyncjs' data-asyncjs=' 
<script src="/jquery.js"></script> 
<script src="/file1.js"></script> 
<script src="/file2.js"></script> 
<script src="/file3.js"></script> 
<script src="/file4.js"></script> 
'></div> 

<script> 
var src = document.getElementById("asyncjs"); 
var magic = src.getAttribute("data-asyncjs"); 
$('head').append(magic); 
</script> 

을 "머리를 추가"할 걸릴. 그러나 사용하는 것이 정상입니까?

P. 또한 나는

document.head.appendChild(magic) 

대신

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

을 사용하려고하지만이 ... 왜 오류가?

Answer 1

작동합니다. 그러나 사용하는 것이 정상입니까?

매우 일반적인 것처럼 보이지 않으며, 특성에 < 기호가있는 것은 유효하지 않습니다. 스크립트를 비동기 적으로로드해야하는 경우 실제 <script> 태그에 async 속성을 사용하지 않는 이유는 무엇입니까?

<script src="/jquery.js" async="async"></script> 
<script src="/file1.js" async="async"></script> 
<script src="/file2.js" async="async"></script> 
<script src="/file3.js" async="async"></script> 
<script src="/file4.js" async="async"></script> 

하지만이 오류는 ... 왜?

.appendChild()에 문자열을 전달할 수 없기 때문에. 노드 만 허용합니다. 이 방법을 사용해야하는 경우 div을 만들고 innerHTML으로 설정 한 다음 문서 헤드에 추가 할 수 있습니다.

var scriptDiv = document.createElement('div'); 
scriptDiv.innerHTML = magic; 
document.head.appendChild(scriptDiv); 

최근 질문

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 관련 문제

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.