jQuery，.html函数的正确语法

Question

我不知何故遇到了语法问题。 我这里有这段代码

$('#logoutput').html("<div id=\"loginbox\" class=\"boxgrid\">Username: <form action=\"\" method=\"post\"><input class=\"textfieldcss\" type=\"text\" name=\"loginname\" value="+$userip+"\">Password: <form action=\"\" method=\"post\"><input class=\"textfieldcss\" type=\"hidden\" name=\"loginpass\" value="+$userpw+"\"></div>");

如果仅内容是：

$('#logoutput').html("<div id=\"loginbox\" class=\"boxgrid\">Username: <form action=\"\" method=\"post\"><input class=\"textfieldcss\" type=\"text\" name=\"loginname\">"

它没有显示我一个错误。

难道是因为我在jQuery函数中实现了错误的变量？

Answer 1

这不是您问题的真正答案，但是它将帮助您减少问题的发生：不要使用这样的字符串。 至少要使用模板。 有很多库可以为您做模板，但是至少可以做一些类似的事情：

<script type="text/html" id="mooTemplate">
  <div id="loginbox" class="boxgrid">
    Username:
    <form action="" method="post">
    <input class="textfieldcss" type="text" name="loginname" value="{{ userip }}">
    Password:
    <form action="" method="post">
    <input class="textfieldcss" type="hidden" name="loginpass" value="{{ userpw }}">
  </div>
</script>

然后将其交换：

var templateHTML = $("#mooTemplate").text()
                   .replace(/{{ userip }}/, userip)
                   .replace(/{{ userpw }}/, userpw);
$(target).html(templateHTML);

再次提醒您，不要自己动手，只需使用网上提供的许多预制模板解决方案之一即可。 我个人喜欢小女孩，但还有很多其他的人。

Answer 2

这似乎可行：

$('#logoutput').html('<div id=\"loginbox\" class=\"boxgrid\">Username: <form action=\"\" method=\"post\"><input class=\"textfieldcss\" type=\"text\" name=\"loginname\" value="'+$userip+'"\">Password: <form action=\"\" method=\"post\"><input class=\"textfieldcss\" type=\"hidden\" name=\"loginpass\" value='+$userpw+'"\"></div>');