首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用JavaScript向HTML页面添加JavaScript代码

使用JavaScript向HTML页面添加JavaScript代码
EN

Stack Overflow用户
提问于 2018-07-31 05:23:14
回答 2查看 813关注 0票数 0

我有一个超文本标记语言表单,输出自定义说明,超文本标记语言和JavaScript指令的字段值。

当用户填写表单并提交时,JS代码将执行以在页面底部注入指令。一旦我包含了<script>,脚本就“死了”,按钮停止工作。我不明白这是怎么回事。

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

代码语言:javascript
复制
<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()

代码语言:javascript
复制
    <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>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-31 06:06:44

你试图从字符串创建超文本标记语言,只是附加到元素,这是错误的,你必须创建元素,就像你对scriptpre做的那样。

下面的代码将为您工作:

代码语言:javascript
复制
<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>
票数 0
EN

Stack Overflow用户

发布于 2018-07-31 05:57:30

不能使用超文本标记语言创建元素;只能通过标记名(可以用textContent属性设置其文本)来创建元素,以附加到DOM元素。

代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51602476

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档