代码如下:
<div id="js"><button onclick="document.getElementById('js').innerHTML=('<form>
<input type=text name=tick1></input>
<input type=text name=tick2></input>
<input type=text name=tick3></input>
<input type=submit></input>
</form>')">Kaarten bestellen</button>
</div>
我真的不明白为什么它不起作用。当我将表单作为实际的html放在脚本之外时,它可以正常工作,当我使用更像.innerHTML('test')的东西时,它工作得很好。我在这里不知所措。
在多行字符串中的每一行末尾添加(请参阅 JavaScript 中的多行字符串变量):
<div id="js"><button onclick="document.getElementById('js').innerHTML=('<form>
<input type=text name=tick1></input>
<input type=text name=tick2></input>
<input type=text name=tick3></input>
<input type=submit></input>
</form>')">Kaarten bestellen</button>
</div>
http://jsfiddle.net/o5tuqt1L/
它工作正常。您不能在此 js 代码中使用换行符。您可以使用 + 运算符来连接字符串。
document.getElementById('js').innerHTML=('<form>'
+'<input type=text name=tick1></input><input type=text name=tick2>'
+'</input><input type=text name=tick3></input><input type=submit>'
+'</input></form>');
工作中的 JSFIDDLE
字符串文字不是封闭的,因为它有多行...你为什么不把它藏起来呢?
<div id="js">
<button onclick="document.getElementById('myForm').style.display='block';this.style.display='none';">
Kaarten bestellen
</button>
<form id="myForm" style="display:none">
<input type=text name=tick1></input>
<input type=text name=tick2></input>
<input type=text name=tick3></input>
<input type=submit></input>
</form>
</div>
Javascript的innerHTML
是一个属性,而不是一个方法,所以你只是像这样给它赋值
document.getElementById('js').innerHTML = "Hello, World.";
内部网页解释
您的 HTML 语法无效:
<form>
<input type=text name=tick1></input>
<input type=text name=tick2></input>
<input type=text name=tick3></input>
<input type=submit></input>
</form>
您的type
和name
属性值需要用双引号括起来"
.input
元素也不需要内容,因此您可以使其自动关闭。检查这个:
<form>
<input type="text" name="tick1" />
<input type="text" name="tick2" />
<input type="text" name="tick3" />
<input type="submit" />
</form>
Javascript字符串不是多行的。所以你需要转义换行符,如下所示:
<form>
<input type="text" name="tick1" />
<input type="text" name="tick2" />
<input type="text" name="tick3" />
<input type="submit" />
</form>
多行 JavaScript 字符串的解释
如果我以正确的方式理解您的问题,这也是一个答案。
<div id="js"><button onclick="document.getElementById('js').innerHTML='<form>'
+'<input type='text' name='tick1'></input>'
+'<input type='text' name='tick2'></input>'
+'<input type='text' name='tick3'></input>'
+'<input type='submit'></input>'
+'</form>'">Kaarten bestellen</button>
</div>
试试这个
<div id="js"><button onclick="document.getElementById('js').innerHTML='<form><input type=text name=tick1></input><input type=text name=tick2></input><input type=text name=tick3></input><input type=submit></input></form>'">Kaarten bestellen</button>
</div>
<div id="js"><button onclick="document.getElementById('js').innerHTML='
<form>
<input type=text name=tick1></input>
<input type=text name=tick2></input>
<input type=text name=tick3></input>
<input type=submit></input>
</form>
'">Kaarten bestellen</button>
</div>
我认为问题的原因是因为要显示的内容跨越了几行而没有正确连接。我重新设计如下;
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<script type="text/javascript">
function loadForm(){
var formContent ="<form>"
+"<input type='text' name='tick1'></input>"
+"<input type='text' name='tick2'></input>"
+"<input type='text' name='tick3'></input>"
+"<input type='submit'></input>"
+"</form>";
document.getElementById('js').innerHTML =(formContent);
}
</script>
<div id="js">
<button onclick="loadForm()">Kaarten bestellen</button>
</div>
</body>
</html>
我认为这也使代码更干净。