0

jqueryを使用して作成する必要があるHTMLバージョンのフォームは次のとおりです...

<form id="loginForm" class="loginLabel" action="login/login.php" method="post">
    Username : <input type="text" name="Username" ><br>
    Password : <input type="password" name="Password" ><br>
    <input type="Submit" name="login_Submit" value="Login">
</form>

そして、これが私が書いたjqueryです...

    var loginForm = document.createElement("form");

    var userInput = document.createElement("input");
        $(userInput).attr("id", "userInput")
                   .attr("type", "text")
                   .attr("name", "Username");

    var br = document.createElement('br');

    var passInput = document.createElement("input");
        $(passInput).attr("id", "passInput")
                   .attr("type", "text")
                   .attr("name", "Password");

    $(loginForm).attr("id","loginForm" )
            .attr("class", "loginLabel")
            .text("Username : ")
            .append(userInput)
            .append(br)
            .text("Password : ")
            .append(passInput);

    $(loginWrapper).append(loginForm);

残念ながら、jquery はユーザー名入力 (userInput) をパスワード入力 (passInput) で上書きします。CSS を確認したところ、十分な余裕がありました。

4

3 に答える 3

7

.text()要素のコンテンツ全体を上書きします。.append()代わりに使用します.text()

$(loginForm).attr("id","loginForm" )
        .attr("class", "loginLabel")
        .append("Username : ")
        .append(userInput)
        .append(br)
        .append("Password : ")
        .append(passInput);
于 2013-09-20T00:21:07.127 に答える
4

テキスト関数は DOM ノード内のすべてのものを新しい値に置き換えるためです。

文字列連結を使用しない理由:

<div id="loginWrapper"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
var html = 
    '<form id="loginForm" class="loginLabel" action="login/login.php" method="post">' + 
    'Username : <input type="text" name="Username" ><br>' + 
    'Password : <input type="password" name="Password" ><br>' + 
    '<input type="Submit" name="login_Submit" value="Login">';
$("#loginWrapper").append($(html));
</script>
于 2013-09-20T00:27:21.213 に答える
2

Musa は正しく.text()上書きします。これを回避するdocument.createTextNode(data);には、textNode を作成してこれらをフォームに追加します。

作業フィドル: http://jsfiddle.net/QDpsP/9/

https://developer.mozilla.org/en-US/docs/Web/API/document.createTextNode

于 2013-09-20T00:42:48.463 に答える