=================================
=================================
=================================
출처: https://www.hooni.net/xe/study/2173
Dynamic Script Loading
1
2
3
4
5
|
var head= document.getElementsByTagName( 'head' )[0]; var script= document.createElement( 'script' ); script.type= 'text/javascript' ; script.src= 'helper.js' ; head.appendChild(script) |
1
2
3
4
5
6
7
8
9
10
11
12
|
var head= document.getElementsByTagName( 'head' )[0]; var script= document.createElement( 'script' ); script.type= 'text/javascript' ; script.onreadystatechange= function () { if ( this .readyState == 'complete' || this .readyState == 'loaded' ) helper(); } script.onload= helper; script.src= 'helper.js' ; head.appendChild(script) |
1
2
3
4
5
|
< script src = "some-lib.js" ></ script > < script > var foo = use_some_lib(); foo.do.stuff(); </ script > |
1
2
3
4
|
< script src = "some-lib.js" > var foo = use_some_lib(); foo.do.stuff(); </ script > |
1
2
|
var scripts = document.getElementsByTagName( "script" ); eval( scripts[ scripts.length - 1 ].innerHTML ); |
1
2
3
4
5
6
|
var script = document.createElement( 'script' ); script.src = "sorttable-async.js" ; script.text = "sorttable.init()" ; document.getElementsByTagName( 'head' )[0].appendChild(script); |
1
2
3
4
5
6
7
8
9
10
|
var scripts = document.getElementsByTagName( "script" ); var cntr = scripts.length; while ( cntr ) { var curScript = scripts[cntr-1]; if ( -1 != curScript.src.indexOf( 'sorttable-async.js' ) ) { eval( curScript.innerHTML ); break ; } cntr--; } |
=================================
=================================
=================================
출처: https://code.i-harness.com/ko/q/d2b9
문제를 설명하는 간단한 테스트 페이지를 만들었습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Document Write Testcase</title> </head> <body> <div id="container"> </div> <div id="container2"> </div> <script> // This doesn't work! var container = document.getElementById('container'); container.innerHTML = "<script type='text/javascript'>alert('foo');document.write('bar');<\/script>"; // This does! var container2 = document.getElementById('container2'); var script = document.createElement("script"); script.type = 'text/javascript'; script.innerHTML = "alert('bar');document.write('foo');"; container.appendChild(script); </script> </body> </html>
이 페이지는 'bar'에 경고하고 'foo'를 인쇄하고 'foo'에 경고하고 'bar'로 인쇄 할 것을 기대했습니다. 그러나 불행히도 script
태그는 더 큰 HTML 페이지의 일부이므로 위의 예처럼 태그를 붙이지 않고 추가 할 수는 없습니다. 글쎄, 할 수 있지만, 그 script
태그에 대한 innerHTML
콘텐츠를 검색하고 자리 표시 자에 의해 문자열에 그들을 교체하고 그들을 사용하여 DOM을 삽입합니다. 그게 사소한 소리는 아니에요.
=================================
=================================
=================================
출처: https://developer.mozilla.org/ko/docs/Web/API/Document/createElement
지정된 태그이름을 가지는 엘리먼트를 생성합니다.
문법
엘리먼트 = document.createElement(태그이름);
예제
이 예제는 새로운 <div> 엘리먼트를 생성한 후, id가 "org_div1" 인 엘리먼트 앞에 추가합니다:
<html> <head> <title>||엘리먼트 사용하기||</title> </head> <script type="text/javascript"> var my_div = null; var newDiv = null; function addElement() { // 새로운 div 엘리먼트를 만들고 // 내용을 작성합니다. newDiv = document.createElement("div"); newDiv.innerHTML = "<h1>안녕! 반가워!</h1>"; // 생성된 엘리먼트를 추가합니다. my_div = document.getElementById("org_div1"); document.body.insertBefore(newDiv, my_div); } </script> <body onload="addElement()"> <div id='org_div1'> 위의 문장은 동적으로 만들어 진 것입니다.</div> </body> </html>
참고 사항
기본값이 있는 잘 알려진 특성(attributes)들은 자동으로 생성되어 엘러먼트에 특성노드로 추가됩니다.
qualified 이름과 네임스페이스 URI를 갖는 엘리먼트를 만들 경우에는 createElementNS 메서드를 사용합니다.
Gecko 엔진의 createElement
구현은 XUL과 XHTML 문서에 대한 DOM 규약을 따르지 않습니다: localName
과 namespaceURI
는 null
로 설정되지 않습니다. 자세한 사항은 bug 280692를 참고하세요.
=================================
=================================
=================================
출처: https://stackoverflow.com/questions/584751/inserting-html-into-a-div
var div = document.createElement("div"); div.innerHTML = '<div class="slideshow-container">\n' + '<div class="mySlides fade">\n' + '<div class="numbertext">1 / 3</div>\n' + '<img src="image1.jpg" style="width:100%">\n' + '<div class="text">Caption Text</div>\n' + '</div>\n' + '<div class="mySlides fade">\n' + '<div class="numbertext">2 / 3</div>\n' + '<img src="image2.jpg" style="width:100%">\n' + '<div class="text">Caption Two</div>\n' + '</div>\n' + '<div class="mySlides fade">\n' + '<div class="numbertext">3 / 3</div>\n' + '<img src="image3.jpg" style="width:100%">\n' + '<div class="text">Caption Three</div>\n' + '</div>\n' + '<a class="prev" onclick="plusSlides(-1)">❮</a>\n' + '<a class="next" onclick="plusSlides(1)">❯</a>\n' + '</div>\n' + '<br>\n' + '<div style="text-align:center">\n' + '<span class="dot" onclick="currentSlide(1)"></span> \n' + '<span class="dot" onclick="currentSlide(2)"></span> \n' + '<span class="dot" onclick="currentSlide(3)"></span> \n' + '</div>\n'; document.body.appendChild(div);
=================================
=================================
=================================
'WEB > JavaScript' 카테고리의 다른 글
[JavaScript] Html5, Canvas 폰트URL. 외부폰트 로드 관련. (0) | 2018.05.14 |
---|---|
[JavaScript] HTML5 캔버스 ctx.fillText는 줄 바꿈 관련 (0) | 2018.05.14 |
[JavaScript] js파일에 다른 js파일 include 하기 관련 How to include js file in another js file? [duplicate] Ask (0) | 2018.04.11 |
[JavaScript] 자바스크립트 ur,text 복사 클립보드, 주소복사 버튼 또는 링크 만들기 -익스,파폭,크롬 (0) | 2018.03.27 |
Web Storage 웹 스토로지 관련 (0) | 2018.02.26 |
댓글 영역