Live demo

Question

我已尝试过此代码的多种变体，无法使用。我正在尝试使包含表单的div出现在另一个div中。

$(document).ready(function() {
    $("#buttoncontact").click(function(){
          $("#back").append('<div id="#contact">
             <form>
             Email:<br>
             <input type="text"><br>
             Comments:<br>
             <textarea rows="8" cols="50"></textarea>
             </form>
             </div>');
      });
});

我还试图在没有表单代码的情况下插入div，但这也无效。

你能提供的任何帮助都会很棒。

Answer 1

Javascript不允许以你的方式转到变量或字符串中的新行。

试试这个：

$(document).ready(function() {
        $("#buttoncontact").click(function(){
            $("#back").append('<div id="#contact"><form>Email:<br><input type="text"><br>Comments:<br><textarea rows="8" cols="50"></textarea></form></div>');
        });
});

Answer 2

Live demo

JavaScript不允许您将字符串分成多行。您可以将整个字符串contet写入一行，或者如果您想使其可读，则将它们与+运算符连接起来。

$(document).ready(function() {
   $("#buttoncontact").click(function(){
      $("#back").append(
         '<div id="#contact">' +
            '<form>' +
               'Email:<br>' +
               '<input type="text"><br>' +
               'Comments:<br>' +
               '<textarea rows="8" cols="50"></textarea>' +
            '</form>' +
         '</div>'
      );
   });
});

Answer 3

JavaScript不支持multi-line strings;在结尾处自动添加分号。因此，将附加的HTML字符串分布在多行中可能会为代码创建语法错误。

您可以将HTML字符串压缩为单行，也可以通过使用加号（+）连接多个字符串来构建多行字符串：

$("#back").append('<div id="contact">' +
'<form>' +
'Email:<br>' +
'</form>' +
'</div>');

或者，在每行的末尾添加反斜杠（\）：

$("#back").append('<div id="contact">\
<form>\
Email:<br>\
</form>\
</div>');

创建一个包含表单的div出现在另一个div中

3 个答案:

Live demo