using JS to place <script> objects into html dom -in a specific place- , after the page has loaded

Question

Here's my js script file, specifically the if statement used to add too my chatbots messages. This is then output on a separate html frontend chat bot window. how can i make this snippet of code show up on the html file? I know JavaScript well enough so this seemed like a simple thing to do, but now I've hit a brick wall with my current knowledge. I have tried putting the script inside the ${data.message} variable within my python web api but to no avail.

if(data.message.includes("Great now, heres our payment portal, once the payment has been confirmed I shall book you in.<br>"))
          {
            $('.chat-window').append(`
            <li class="right clearfix">
                <div class="chat-body clearfix">
                    <div class="header">
                            <strong class="pull-left primary-font">Peggy</strong><br>
                    </div>
                    <p>
                    ${data.message}<br>  Doing the thing
                    <img alt="Checkout" class="v-button" role="button" src="www.example.com/sandbox"/>
                    <script type="text/javascript" src="www.example.com/sandbox"></script>
                    </p>
                </div>
            </li>
          `)
          }
          else          {
            $('.chat-window').append(`
            <li class="right clearfix">
                <div class="chat-body clearfix">
                    <div class="header">
                            <strong class="pull-left primary-font">Peggy</strong><br>
                    </div>
                    <p>
                    ${data.message}
                    </p>
                </div>
            </li>
          `)

^^ js script file
\/ html file

                    <div class="panel-body">
                        <ul class="chat-window">
                            <li class="right clearfix">
                                <div class="chat-body clearfix">
                                    <div class="header">
                                        
                                        <strong class="pull-left primary-font">Peggy: </strong><br>
                                    </div>
                                    <p>
                                        Hi my name is Peggy Booking assistant, how can I assist you today?
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>

Basically I'm asking how do i add the <script type="text/js" src="example.com/sandbox"> <script/> to my main html file in the browser after the page has loaded inside the <div class"chat-window">. I can get the image to show up just fine using the data.message object, its just the script. a week of googling has not helped.

Does this answer your question? How to add DOM element script to head section? — Heretic Monkey
– Heretic Monkey, Commented Jul 21, 2020 at 17:03
I'm not sure, from my understand of the api im working with i need to put the <script> inside the same div as the <image> so that it runs at the right time. — TempestDev
– TempestDev, Commented Jul 21, 2020 at 17:13
Any requirements should be spelled out in the question, not the comments. Please edit your question to include any information that people should know. Note that src="www.example.com/sandbox" will likely result in an attempt to get the script from http://baseURL/www.example.com/sandbox, which may more may not be what you want. — Heretic Monkey
– Heretic Monkey, Commented Jul 21, 2020 at 17:18
Yeah i know the one that is normally in there is an api front end with the api key — TempestDev
– TempestDev, Commented Jul 21, 2020 at 17:22
This is jquery code, thus you have to import jquery as well. — NVRM
– NVRM, Commented Jul 22, 2020 at 16:40

NVRM · Accepted Answer · 2020-07-21 17:23:25Z

0

There is many ways, but our browsers have now this capabilities built-in!

Dynamic Imports

Example using a lib suncalc.js, the server must have CORS enabled to works this way!

Example, getting a lib from a CDN, after DOM load, directly available in the current context:

(async () => {
 // Get and import the lib
 await import('https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js')
 .then(function(){
   // Lib ready to use
   let times = SunCalc.getTimes(new Date(), 51.5,-0.1);
   console.log("Golden Hour today in London: " + times.goldenHour.getHours() + ':' + times.sunrise.getMinutes() + ". Take your pics!")
  })
})()

From

edited Jul 21, 2020 at 17:23

answered Jul 21, 2020 at 17:18

NVRM

13.5k2 gold badges102 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Heretic Monkey Over a year ago

This requires the code in the JavaScript file to support being loaded as a module. Also, since you've already used almost exactly the same answer elsewhere, you should be closing the question as a duplicate, not pasting the same answer across multiple questions.

NVRM Over a year ago

Yes, Modern browsers, caniuse.com/#feat=es6-module-dynamic-import

TempestDev Over a year ago

yeah this didnt exactly help, just importing a external script after a bit of time. thanks Heretic Monkey for trying to point that out to probably a ?bot? ive edited my question and hopefully its better to understand.

Collectives™ on Stack Overflow

using JS to place <script> objects into html dom -in a specific place- , after the page has loaded

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related