JQuery make html insert look nicer

Question

Я вставляю веб-форму после инициализации успешного соединения с сервером socket.io. Это выглядит следующим образом:

$('#login').append('<div class="title">typical title</div>'); 
    $('#login').append('<div class="subtitle">enter wittiness here</div>'); 
    $('#login').append('<form><hr>'); 
    $('#login form').append('<div style="text-align:center;"> Username: <input type="text" placeholder="Username..." id="username" name="username"></div>'); 
    $('#login form').append('<div style="text-align:center;"> Password: <input type="password" placeholder="Password..." id="password" name="password"></div>'); 
    $('#login form').append('<hr width="80%" /><input type="submit" class="login" value="Log in!" /><input type="button" class="register" value="Registration" />'); 

На мой взгляд, что не выглядит так хорошо, есть способ, которым я могу либо загрузить этот фрагмент кода HTML или сделать этот код выглядеть лучше, это на стороне клиента тоже так что каждый может смотреть это безобразие ...

Answer 1

Вы можете сначала установить его для отображения: нет или скрыть ее скрыть() метод, а затем показать его после добавления()

Например сделать первый узел и скрыть его (hide() добавляет отображение: нет) так же

node=$('<div style="text-align:center;"></div>').hide(); 

затем добавить узел и использовать какой-либо эффект от шоу, FadeIn, slidedown покажет

Show()

$('#login form').append(node).show("slow"); 

FadeIn() будет выглядеть еще более лучше

$('#login form').append(node).fadeIn("slow"); 

Вы можете посмотреть эффект скольжения, а

slideDown()

$('#login form').append(node).slideDown("slow"); 

Answer 2

$('#login').append('<div class="title">typical title</div><div class="subtitle">enter wittiness here</div><form><hr>'); 
$('#login form').append('<div style="text-align:center;"> Username: <input type="text" placeholder="Username..." id="username" name="username"></div><div style="text-align:center;"> Password: <input type="password" placeholder="Password..." id="password" name="password"></div><hr width="80%" /><input type="submit" class="login" value="Log in!" /><input type="button" class="register" value="Registration" />');