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

Question

我有一个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>

Answer 1

您不能使用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>

Answer 2

您尝试从字符串创建html并将其追加到element上，这是错误的，您必须像使用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>

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

问题描述

2 个解决方案

解决方案1
0 2018-07-30 21:57:29

解决方案2
0 已采纳 2018-07-30 22:06:44

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

问题描述

2 个解决方案

解决方案1 0 2018-07-30 21:57:29

解决方案2 0 已采纳 2018-07-30 22:06:44

解决方案1
0 2018-07-30 21:57:29

解决方案2
0 已采纳 2018-07-30 22:06:44