Replicate val() content in span

Question

I found this code that works very well in inputs:

<script>
$(function() {
    $("[name='email']").keyup(function() {
        var email = $(this).val();
        $("[name='login']").val(email); }); });

</script>
<input type="text" name="email" placeholder='email' />
<input type="text" name="login" placeholder='login' />

But I made some modifications wanting to work on other elements like span.

<script>
$(function() {
    $("[name='email']").keyup(function() {
        var email = $(this).val();
        $(email).insertAfter("span.login"); }); });

</script>
<input type="text" name="email" placeholder='email' />
<span class="login"></span>

but it doesn’t work, but if I put any ready text in place of $(email). insertAfter ai works, there is a way to function as it works in input?

Answer 1

The normal would be to add the span selector and use the html() method to insert the text in this way:

$("[name='email']").keyup(function() {
  var email = $(this).val();
  $("[name='login']").val(email);
  $("#spanLogin").html(email);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="email" placeholder='email' />
<input type="text" name="login" placeholder='login' />
<span id="spanLogin"></span><span>

Answer 2

To insert the text in by the id="" you use . text(). follows the code.

$(function() {
    $("[name='email']").keyup(function() {
        var email = $(this).val();
        $("span.login").text(email);;
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<input type="text" name="email" placeholder='email' />
<span class="login"></span>