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を使用したいと思います。ボタンは隠され、

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

のような2つの入力フィールドが表示されます。私は、内部のスクリプトタグを使用していますが、私はこれまでのところで、

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

    })