현재 위치에 텍스트를 추가하는 방법은 무엇입니까?

Question

<div> 
HI! 
<script> 
var spanNode = document.createElement('span'); 
var textNode = document.createTextNode('there.'); 
//how to append here spanNode? 
</script> 
How are you? 
</div> 

document.write() 메소드를 사용하고 싶지 않습니다.

단지 문서의 <div>HI! <script />있다 실행의 순간에, 그래서 기본적으로 <script> 요소가 즉시 실행

<div>HI!<span>there.</span>How are you?</div> 

Answer 1

의는 "어떻게 당신에게있다"결과는 다음과 같이 될 수 있도록 그래서, 여기에 무엇을 사용해야합니다 부분이 아직 처리되지 않았습니다. 현재 처리중인 <script> 요소는 문서의 마지막 스크립트 요소이므로 document.scripts[ document.scripts.length - 1 ]을 사용하여 참조 할 수 있습니다. 그런 다음 부모 노드를 찾아 요소를 추가하십시오.

<div> 
HI! 
<script> 
var spanNode = document.createElement('span'); 
var textNode = document.createTextNode('there.'); 
    spanNode.appendChild(textNode); 
/* this is the currently interpreted <script> element 
    so you can append a child to its parent. 
*/ 
document.scripts[ document.scripts.length - 1 ].parentNode.appendChild(spanNode); 
</script> 
How are you? 
</div> 

http://jsfiddle.net/0LsLq9x7/

편집 : http://jsfiddle.net/0LsLq9x7/1/

<div> 
HI! 
<script> 
(function(scriptElement){ 
    // these variables will be local to this closure 
    var spanNode = document.createElement('span'); 
    var textNode = document.createTextNode('there.'); 
    spanNode.appendChild(textNode); 
    scriptElement.parentNode.appendChild(spanNode); 
// pass a reference to the script element as an argument to the function 
}(document.scripts[ document.scripts.length - 1 ])); 
</script> 
How are you? 
</div> 

Answer 2

먼저 현재 스크립트를 얻을 수 있습니다 : 글로벌 네임 스페이스가 즉시 실행하는 익명 함수의 코드를 포장 할 수 깨끗하게 유지합니다. 그런 다음

<div> 
 
HI! 
 
<script id="myscript"> 
 
var spanNode = document.createElement('span'); 
 
var textNode = document.createTextNode('there.'); 
 
    spanNode.appendChild(textNode); 
 
    
 
    //appending the span node 
 
    var ele = document.currentScript; //get current script element 
 
    ele.parentNode.insertBefore(spanNode,ele); //append the span before the script 
 
</script> 
 
How are you? 
 
</div>