Append text in html <script></script> tag. Javascript issue

Question

I want to add text to a span container on runtime by calling a javascript function into the HTML node like so :

<span class="muted">
   <script>
       //Here I want to add the string returned to outer span. (I also use jinja tags) 
       getGenericObjName("{{n.news_type}}",{{n.news.object_id}});
   </script>
</span>

The reason I do this is because I iterate over a news feed. And i know that the function returns the correct value.

I also tried to use document.write(...) but it seems to override the whole page.

Thanks!

Answer 1

<span class="muted">
   <script>
       //Here I want to add the string returned to outer span. (I also use jinja tags) 
       document.write(getGenericObjName("{{n.news_type}}",{{n.news.object_id}}));
   </script>
</span>

If you are already using jQuery a better solution might be:

<span class="muted"></span>

<script>
 //Here I want to add the string returned to outer span. (I also use jinja tags) 
$('.muted').html(getGenericObjName("{{n.news_type}}",{{n.news.object_id}}));
</script>

In this case don't put the javascript inside/before the span because it will be called before the span is in the DOM.

Answer 2

Do the other way round, via JS (using jQuery):

<script type="text/javascript">
    $(".muted").html(getGenericObjName("{{n.news_type}}",{{n.news.object_id}}));
</script>

HTML:

<span class="muted"></span>