使用javascript創建輸入字段

Question

我目前在我的html文件中設置了2個按鈕。

<div class="login-register"> 
      <button type="button" id="login" onclick="login()">Login</button> 
      <button type="button" id="register">Register</button> 
</div><!-- end of login-register --> 

我想將這些按鈕與JavaScript結合使用，以便在登錄時單擊。然後按鈕被隱藏，並且2個輸入字段如

<input id="username" type="text" name="username" placeholder="Username"> 
<input id="password" type="text" name="password" placeholder="Password"> 

出現。我使用的是內部腳本標籤和所有我到目前爲止，

$("#login").click(function(){ 
     var usernameInputField = document.createElement("login"); 
     usernameInputField.setAttribute('type', 'text'); 
     usernameInputField.setAttribute('placeholder', 'Username'); 
     usernameInputField.setAttribute('name', 'username'); 
    }) 

我不知道這是很好的做法，或者如果有另一種首選方法來設置此。

Answer 1

如果你想純JavaScript我會建議只是操縱風格。

這將是這個樣子

YourElement.style.visibility = "hidden"; 

這是最好的做法？我認爲這一切都取決於您的應用程序。但在這樣一個簡單的事情，它工作正常。

Answer 2

總是有可能取代內部html或整個div。

例如

$("#login").on('click',function(){ 
    $('.login-register').html('<input id="username" type="text" name="username" placeholder="Username"><input id="password" type="text" name="password" placeholder="Password">'); 
}); 

雖然，你的密碼輸入的類型應該password

Answer 3

$("#login").click(function(){ 

     document.getElementById("login-register").style.visibility = "hidden"; 

     document.getElementById("username-password").style.visibility = "visible"; 

    })