javascript - How to append text to current position? - Stack Overflow

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

I don't want to use document.write() method. So, what should I use here so the result would be like this:

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

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

I don't want to use document.write() method. So, what should I use here so the result would be like this:

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

• javascript

Share Improve this question Follow asked Dec 15, 2014 at 9:46 Navin RauniyarNavin Rauniyar 10.6k1414 gold badges4646 silver badges7070 bronze badges 1

• Do you want a way to append the span according to the position of the script tag? – Sampath Liyanage Commented Dec 15, 2014 at 9:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

A <script> element by default is executed immediately, so at the moment of execution there's just <div>HI! <script /> in the document, the "How are you" part hasn't been processed yet. At this moement the currently processed <script> element will be the last of script elements in your document so you can reference it using document.scripts[ document.scripts.length - 1 ], then find its parent node and append the elements.

<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/0LsLq9x7/

Edit: to keep the global namespace clean you could wrap the code in an anonymous function which executes immediately: http://jsfiddle/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>

You can first get the current script. Then add the element before (or after) the script..

<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>