jQuery, function .html correct syntax

Question

Somehow I ran into a syntax problem. I have this code here

$('#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>");

if the content only is:

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

it doesn't show me an error.

Could this be because I implemented the variables wrong into the jQuery function?

Answer 1

Not a true answer to your question, but it'll help you make this far less problematic: don't use strings like this. At the very least use a template. There are lots of libraries that do templating for you, but at least do something like:

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

And then swap it in:

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

Although again, don't roll this yourself, just use one of the many premade templating solutions available on the web. I personally like nunjucks, but there are tons of others.

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