使用JS放置<script> objects into html dom -in a specific place- , after the page has loaded

Question

這是我的 js 腳本文件，特別是用於添加我的聊天機器人消息的 if 語句。 然后在單獨的 html 前端聊天機器人窗口上輸出。 我怎樣才能讓這段代碼顯示在 html 文件中？ 我對 JavaScript 非常了解，所以這似乎是一件簡單的事情，但現在我已經用我目前的知識碰壁了。 我曾嘗試將腳本放在我的 python web api 中的 ${data.message} 變量中，但無濟於事。

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 腳本文件
\\/html 文件

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

基本上我問的是如何在頁面加載到 <div 中后將<script type="text/js" src="example.com/sandbox"> <script/>到瀏覽器中的主 html 文件中類“聊天窗口”>。 我可以使用 data.message 對象讓圖像顯示得很好，它只是腳本。 一周的谷歌搜索沒有幫助。

Answer 1

有很多方法，但我們的瀏覽器現在內置了這個功能！

動態導入

使用 lib suncalc.js 的示例，服務器必須啟用 CORS 才能以這種方式工作！

例如，從 CDN 獲取一個庫，在 DOM 加載后，直接在當前上下文中可用：

 (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!") }) })()

從