document.write 작업 정보
8726 단어 JavaScript
개요
document.write는 사용을 권장하지 않지만 GTA에서 사용했기 때문에 동작을 검증해 봤습니다.
검증 프로그램
document.write와 insert Adjacent Element (삽입 위치 지정) 을 통해script 탭을 DOM에 삽입합니다.
삽입된 JS의 실행 순서를 확인합니다.
HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>console.log('header!')</script>
</head>
<body>
<script type="text/javascript" src="./js/first.js"></script>
<script>
console.log('after script');
</script>
<img src="../masuo.jpeg" alt="masuo-san">
</body>
</html>
first.js(insertAdjacentElement)
(() => {
console.log('first');
const second = document.createElement('script');
second.id = 'second';
second.src="./js/second.js";
second.type = 'text/javascript';
const first = document.getElementById('first');
first.insertAdjacentElement('afterend', second);
})();
console.log('first out');
(() => {
console.log('first');
document.write('<script id="second" type="text/javascript" src="./js/second.js"></script>');
})();
console.log('first out');
(() => {
console.log('second');
const third = document.createElement('script');
third.type = 'text/javascript';
third.innerText = `console.log('third inline');`;
const second = document.getElementById('second');
second.insertAdjacentElement('afterend', third);
})();
console.log('second out');
(() => {
console.log('second');
document.write('<script id="third" type="text/javascript">console.log("third inline");</script>');
})();
console.log('second out');
결실
insertAdjacentElement
document.write
고찰하다.
Reference
이 문제에 관하여(document.write 작업 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nannou/items/6d6d0fc274add2b7469e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
