如何通过单击按钮插入 html答案

【问题标题】：How to insert html from a button click如何通过单击按钮插入 html
【发布时间】：2015-01-20 00:34:42
【问题描述】：

我试图在单击按钮时插入一个表单，但找不到一种方法，它不会让我将所有 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>

【问题讨论】：

标签： javascript html insert block

【解决方案1】：

只需将右侧的第一个和最后一个 " 替换为 ' 并删除所有 \ 像这样：

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

【讨论】：

【解决方案2】：

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

如果一行太长，你可以按照 hamism 的建议进行连接，这样你可以让你的代码看起来更干净。

【讨论】：

【解决方案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>';
};

【讨论】：

【解决方案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）并预编译您的模板。

或者，您可以使用这样的多行字符串破解： https://github.com/sindresorhus/multiline

【讨论】：

【解决方案5】：

如果您想将它放在单独的行中以便于阅读，请将您的 html 创建为变量并与“+”符号连接。还对主 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

【讨论】：