I have a page name index.php. And I have a script variable as follows at the top of the page:

<script>
    var search_quarry = "some_test";
</script>

At the bottom of the same page I want to add this variable into the src attribute of a script tag:

<script src=NEED_TO_ADD_HERE></script>

This doesn't work:

<script src=search_quarry> </script>

Can anyone please tell me how to do this?

I have a page name index.php. And I have a script variable as follows at the top of the page:

<script>
    var search_quarry = "some_test";
</script>

At the bottom of the same page I want to add this variable into the src attribute of a script tag:

<script src=NEED_TO_ADD_HERE></script>

This doesn't work:

<script src=search_quarry> </script>

Can anyone please tell me how to do this?

• javascript
• html

• A better approach would be to create a variable in your server programming language (probably php). Then it is trivial to inject that php variable anywhere you want it in your HTML. You are trying to do a task in your browser programming language (javascript), that it is more sensible to do in your server programming language, before the HTML is sent to the user's browser. – ToolmakerSteve Commented Oct 7, 2019 at 13:29

4 Answers 4

You'd need to do with DOM manipulation:

var search_query = 'some_test';
s = document.createElement('script');
s.src = search_query;
document.getElementsByTagName('head')[0].appendChild(s);

or, as an alternative, though I'm not sure if this'd work:

<script id="fixme"></script>
<script type="text/javascript">
    var search_query = 'some_test';
    document.getElementById('fixme').src = search_query;
</script>

Why would you do this? Seems like a hack to make sever code work without fixing the back end

Option 1 is with document.write

<script>
    document.write("<script src='" + search_quarry + "'></scr" + "ipt>");
</script>

Option 2 is to use createElement and appendChild

<script>
    var scr = document.createElement("script");
    scr.src = search_quarry;
    document.getElementsByTagName("head")[0].appendChild(scr);  //or use body with document onready
</script>

This is not possible. You cannot use a javascript variable inside the declaration tags for javascript. That is the point of the tags: everything inside them is parsed as javascript; everything outside them is not.

Here's a simple way to do what you want

window.onload=function(){
    var script=document.createElement("script");
    script.type="text/javascript";
    script.src=search_quarry;
    document.appendChild(script)
}

Although you would like to change window.onload into something else or just put the code inside at the top level, or if using jQuery:

$(document).ready(function(){
    $(document).append("<script type='text/javascript' src='"+search_quarry+"'/>");
});