- 나중에 추가하는 <script> 가 실행되지 않을 때-
A를 실행하면 B 페이지를 가져온다.
새로 가져온 페이지 안에는 script 내용도 있다.
기능이 잘 작동하려면 이 script 부분도 잘 로드되어야 한다.
그런데 기능이 제대로 작동하지 않았다.
콘솔을 보니 함수를 찾을 수 없다는 에러가 나타났다.
확인해 보니 새로 가져온 script 부분이 실행조차 되지 않았다.
브라우저 개발자 도구(크롬 f12)를 열여서 요소를 확인해 봤다.
script 태그는 잘 가져왔고, 요소 안에 잘 들어 있었다.
가져오기는 하지만 실행은 제대로 되지 않는 상태였다.
스크립트 문법에 에러가 있어서 그런가?
스크립트 내용을 간단하게 바꿔 봤다.
<script> alert('hello world'); </script>
그럼에도 실행되지 않았다.
아니, 요소가 잘 로드되어 있는데,
실행은 되지 않는다니...?
- ele.append() 함수를 이용했을 때 ( 실행 X ) -
어떤 요소를 추가할 때, 여러 가지 방법이 있다.
하지만 그 기능이나 의도가 조금씩 다르다.
요소에다가 append() 함수를 이용해서 <script> 태그를 추가했다면
스크립트가 제대로 실행되지 않는다.
append 함수로 추가한 내용은
DOM요소나 NODE로 인식하지 않고
text 그대로로 인식한다.
내가 추가한 script 내용이 텍스트 형태 그대로 추가될 뿐,
실행되지는 않는 것을 확인할 수 있다.
<body>
<button onclick="runTest();">run test</button>
<body>
<script>
const comm = "<script>alert('hello world');<\/script>";
document.querySelector('#target').append(comm);
</script>- ele.innerHTML 속성을 이용해서 <script> 태그를 추가했을 때 ( 실행 X ) -
다음은 요소에 innerHTML 속성 값을 수정하는 방법이다.
아까보다는 뭔가 좀 더 나아 보인다.
text로 추가하지 않고 적어도 DOM 요소로써 추가한다.
개발자 도구를 열어서 element를 select 해 보면
분명 script 요소가 들어 있기는 하다.
아까처럼 text로 추가된 것도 아니고,
확실히 HTML DOM 요소다.
그러나 이 방법도 여전히 작동하지 않는다.
<script> 태그를 추가하기는 하지만 실행은 하지 않는다.
<script> 안에 있는 내용에 접근하려고 하면 여전히
함수나 변수를 찾을 수 없다는 오류가 나온다.
<body>
<button onclick="runTest();">run test</button>
<body>
<script>
const comm = "<script>alert('hello world');<\/script>";
document.querySelector('#target').innerHTML = comm;
</script>- ele.appendChild 함수를 이용해서 <script> 태그를 추가했을 때 ( 실행 O ) -
드디어 <script> 태그를 로드하고 제대로 실행까지 하는 방법을 찾았다.
바로 appendChild() 함수다.
단, appendChild 함수를 호출할 때는
파라미터로 DOM 요소나 node를 넣어줘야 한다.
따라서 createElement() 함수로 script 태그를 먼저 생성한 뒤에
그 태그 안에 내용을 채워 넣어 준다.
이렇게 내용을 채운 script를 그대로 페이지에 끼워넣어 준다.
이렇게 추가한 <script> 는 제대로 실행까지 한다.
따라서 그 안에 들어 있는 함수나 변수들도 페이지에 로드된다.
<body>
<button onclick="runTest();">run test</button>
<body>
<script>
const scr = document.createElement('script');
const comm = "alert('hello world');";
scr.innerHTML = comm;
// scr.innerText = comm; // same as upper line
document.querySelector('#target').appendChild(scr);
</script>/ 정리
ele.append()
> text 상태 그대로 추가
ele.innerHTML
> 요소로써 추가되지만 실행은 안 됨
ele.appendChild()
> 요소로써 추가되고 실행도 됨
- 220712
'JavaScript' 카테고리의 다른 글
| 페이징 인덱스 만들기 / 페이지네이션 만드는 법 (0) | 2022.08.22 |
|---|---|
| ele.children 속성 HTML Collection 자료형 forEach 반복문 돌리기 (0) | 2022.08.18 |
| [JavaScript] 팝업창 다른 페이지에서 불러올 때 script 주의할 점 (0) | 2022.07.31 |
| [JavaScript] Uncaught ReferenceError: fn is not defined at HTML Element onclick 원인 이유과 해결 방법 (0) | 2022.07.25 |
| [JavaScript] 팝업창에서 닫기 버튼이 작동하지 않을 때 (0) | 2022.07.20 |