使用 JavaScript 将 JavaScript 代码添加到 HTML 页面

Posted 2023-05-07

技术标签:

【中文标题】使用 JavaScript 将 JavaScript 代码添加到 HTML 页面【英文标题】：Add JavaScript code to an HTML page using JavaScript 【发布时间】：2019-01-07 04:57:15 【问题描述】：

我有一个 html 表单，它采用字段值来输出自定义指令 HTML 和 javascript 指令。

当用户填写表单并提交时，JS代码会执行以在页面底部注入指令。一旦我包含<script>，脚本“死”并且按钮停止工作。我不明白发生了什么。

下面是我的代码。如果您还需要什么，请告诉我。

<html>
<head>
    <script type="text/javascript">
        function formInfo(personalCode)
        
            var instructionHttp = "<p># Step 1 - Add " + personalCode + "'s API</p><pre><script src='https://" + personalCode + ".customapi.com'></script></pre>";
            document.getElementById('returnedHtml').innerHTML = instructionHttp;
        
    </script>
</head>
<body>
    <h1>Instructions Generator</h1>
    <form name="myform" action="" method="GET">
        <div class="showLabel"><label for="signupcode">Code</label></div><input type="text" name="signupcode" value="" autofocus ><br>
        <input type="button" value="submit" onclick="
            code=document.myform.signupcode.value;
            formInfo(signupcode);"> <br>
    </form>
    <br><hr><br>
    <p>--- Customized Instructions ---</p>
    <br>
    <div id="returnedHtml"></div><br>
</body>

我也尝试用以下内容替换 formInfo()

    <script type="text/javascript">
        function formInfo(personalCode)
        
            var pre1 = document.createElement('pre');
            var api = document.createElement('script');
            api.src = "https://" + personalCode + ".customapi.com";
            pre1.appendChild(api);

            var instructionHttp = "<p># Step 1 - Add " + personalCode + "'s API</p>";
            instructionHttp.appendChild(pre1);

            document.getElementById('returnedHtml').innerHTML = instructionHttp;
        
    </script>

【问题讨论】：

【参考方案1】：

您尝试从字符串创建 html 并只是附加到元素，这是错误的，您必须像使用 script 和 pre 一样创建元素。

此代码将为您工作：

<html>
    <head>
        <script type="text/javascript">
            function formInfo()
            
               var personalCode = document.getElementById('signupcode').value
               var pre1 = document.createElement('pre');
               var api = document.createElement('script');
               api.src = "https://" + personalCode + ".customapi.com";
               pre1.appendChild(api);

               var instructionHttp = document.createElement('p');
               instructionHttp.innerHTML = "# Step 1 - Add " + personalCode + "'s API"

               instructionHttp.appendChild(pre1);

               document.getElementById('returnedHtml').innerHTML = instructionHttp.outerHTML;
           
       </script>
   </head>
   <body>
       <h1>Instructions Generator</h1>
       <form name="myform" action="" method="GET">
           <div class="showLabel"><label for="signupcode">Code</label></div><input type="text" name="signupcode" id="signupcode" value="" autofocus ><br>
           <input type="button" value="submit" onclick="formInfo()"> <br>
       </form>
       <br><hr><br>
       <p>--- Customized Instructions ---</p>
       <br>
       <div id="returnedHtml"></div><br>
   </body>
</html>

【讨论】：

谢谢！这比我所做的更有意义。但是，script 正在加载而不是打印，这是我将其放置在 pre 元素中时所期望的。有什么建议吗？通过添加pre1.textContent = api.outerHTML;解决，而不是追加。【参考方案2】：

你不能用 HTML 创建元素；您只能通过标签名称创建元素（您可以使用 textContent 属性设置其文本）以附加到 DOM 元素。

<html>
<head>
    <script type="text/javascript">
       function formInfo(personalCode)
        
            //var pre1 = document.createElement('pre');
            var api = document.createElement('script');
            api.src = "https://" + personalCode + ".customapi.com";
            //pre1.appendChild(api);
         
            var instructionHttp = "<p></p>";
            var instructionHttp = document.createElement("p");
            instructionHttp.textContent = "# Step 1 - Add " + personalCode + "'s API";
            instructionHttp.appendChild(api);

            document.getElementById('returnedHtml').innerHTML = instructionHttp.innerHTML;
        
    </script>
</head>
<body>
    <h1>Instructions Generator</h1>
    <form name="myform" action="" method="GET">
        <div class="showLabel"><label for="signupcode">Code</label></div><input type="text" name="signupcode" value="" autofocus ><br>
        <input type="button" value="submit" onclick="
            code=document.myform.signupcode.value;
            formInfo(code);"> <br>
    </form>
    <br><hr><br>
    <p>--- Customized Instructions ---</p>
    <br>
    <div id="returnedHtml"></div><br>
</body>
</html>

【讨论】：

以上是关于使用 JavaScript 将 JavaScript 代码添加到 HTML 页面的主要内容，如果未能解决你的问题，请参考以下文章