使用JavaScript向HTML页面添加JavaScript代码
使用JavaScript向HTML页面添加JavaScript代码
提问于 2018-07-31 05:23:14
我有一个超文本标记语言表单，输出自定义说明，超文本标记语言和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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-31 06:06:44
你试图从字符串创建超文本标记语言，只是附加到元素，这是错误的，你必须创建元素，就像你对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>Stack Overflow用户
发布于 2018-07-31 05:57:30
不能使用超文本标记语言创建元素；只能通过标记名(可以用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51602476
复制相关文章
相似问题
腾讯云开发者
