我的 innerHTML 命令没有改变任何东西，我不明白为什么

Question

代码如下：

    <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') 的东西时，它工作得很好。我在这里不知所措。

Answer 1

字符串文字没有闭合，因为它有多行...你为什么不直接隐藏它？

<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>

Answer 2

试试这个

 <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>

Answer 3

您需要将 \ (see Multiline String Variables in 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/

Answer 4

它工作正常。您只是不能在此 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>');

working jsfiddle

Answer 5

<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>

Answer 6

Javascript的innerHTML是一个属性，不是一个方法，所以你只需要像这样给它赋值

document.getElementById('js').innerHTML = "Hello, World.";

innerHTML Explanation

您的 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>

Explaination on Multi-Line Javascript Strings

Answer 7

我认为问题是因为要显示的内容跨越多行而没有正确连接。我按如下方式对其进行了修改；

<!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>

我认为这也使代码更清晰。

Answer 8

如果我以正确的方式理解你的问题，这也是一个答案。

<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>

我的 innerHTML 命令没有改变任何东西，我不明白为什么

My innerHTML command isn't changing anything and i can't figure out why

html

javascript

function