Question

我试图在单击一个按钮时插入一个表单，但找不到一种方法，不会让我把所有的HTML放在一行上用反斜杠或许多丑陋的代码行。一些不包括添加jQuery或php的东西。

本质上：我怎样才能做到这一点......（这就是一行）

<script> function newMsg() { document.getElementById("add_message").innerHTML = "<div class=\"message\">Add Message<br>Title: <input type=\"text\" id=\"title\"><br>Text: <input type=\"text\" id=\"message\"><br><br></div>"; } </script>

再看一下这样的东西（具有良好的格式和多行）

<script>function newMsg() {function newMsg() {
document.getElementById("add_message").innerHTML = 
"<div class="message">Add Message<br>
Title: <input type="text" id="title"><br>
Text: <input type="text" id="message"><br><br>
</div>";
}
</script>

Answer 1

只需更换第一个和最后一个＆＃34;右手边的＆＃39;并删除所有\ 像这样：

document.getElementById("add_message").innerHTML = '<div class="message">Add Message<br>Title: <input type="text" id="title"><br>Text: <input type="text" id="message"><br><br></div>';

Answer 2

.innerHTML = '<div class="message">Add Message<br>'
+ 'Title: <input type="text" id="title"><br/>' 
+ 'Text: <input type="text" id="message"><br/><br/></div>';

如果一行太长，你可以做一些简单的建议以及连接，这样你就可以使你的代码看起来更清晰。

Answer 3

你可以检查这个小提琴：

http://jsfiddle.net/7sqha4ks/

function myFunction(){
document.getElementById("add_message").innerHTML = 
'<div class="message">Add Message<br>Title: <input type="text" id="title">      
 <br>Text: <input type="text" id="message"><br><br></div>';
};

Answer 4

如果你的问题只是格式化，你可以使用一系列的行和join数组方法，如下所示：

var html = [
    '<div class="message">Add Message<br>',
        'Title: <input type="text" id="title"><br>',
        'Text: <input type="text" id="message"><br><br>',
    '</div>'
].join("\n");

或者，您可以使用Handlebars或Jade等模板语言并预编译模板。

或者，你可以像这样使用多行字符串hack： https://github.com/sindresorhus/multiline

Answer 5

如果您想在单独的行上获取它以便于阅读，请将html创建为变量并与＆＃34; +＆＃34;连接。符号。对主html中的任何引号也使用单引号。类似的东西：

var html = "<div class='message'>Add Message<br>"
 + "Title: <input type='text' id='title'><br>"
 + "Text: <input type='text' id='message'><br><br>"
 + "</div>";

document.getElementById("add_message").innerHTML = html

如何从单击按钮插入html

5 个答案: