Adding to div with jQuery & HTML

Question

So I'm having some issues with my code. I'm trying to remove a link (a) and then after that add a new link (a) with different text.

Here's the code

HTML:

<label for="name" class="control-label">Username:</label> 
@<a href="<?php echo $username ?>">
    <p class="text-info-username">
        <?php echo strtolower($username) ?><i class="icon-star"></i></a></p>
<div class="controls-username">
    <a href='#' id="edit-username" class="btn"><i class="fa fa-pencil"></i> Edit</a>
</div>

Script:

$('#edit-username').click(function() {
 var text = $('.text-info-username').text();
 var input = $('<input type="text" placeholder="' + text + '" id="editTextBox" />')

 $('.text-info-username').text('').append(input);
 $('#edit-username').remove();
 $('<a href='#' id="update" class="btn">Update</a>').appendTo('.controls-username');
 $('<br /><br />').insertAfter('.controls-username');

});

Answer 1

I think you had an issue with your quotations. Here's a revised version of your JS:

$('#edit-username').click(function() {
 var text = $('.text-info-username').text();
 var input = $('<input type="text" placeholder="' + text + '" id="editTextBox" />');

 $('.text-info-username').text('').append(input);
 $('#edit-username').remove();
 $('<a href="#" id="update" class="btn">Update</a>').appendTo('.controls-username');
 $('<br /><br />').insertAfter('.controls-username');

});

Also a jsFiddle: http://jsfiddle.net/qhcf39oo/

Answer 2

Multiple concerns:

1. Your HTML element nesting is wrong with the first -Tag.
2. Your missing a semicolon in javascript after the definition of input.
3. Fiddling with the html from javascript is not really good. Its harder to debug later on and not necessary. Use an approach of already delivering the html with the initial pageload and use css/javascript to hide and unhide (show) them appropriately.

I've made an quick jsFiddle for you:

$('#button-edit-username').click(function() {

  // Hide the user list
  $('.text-info-username').hide();

  // Show a form with pre-filled contents
  var text = $('.text-info-username').text();
  $('#editTextBox').attr('placeholder', text);
  $('#editForm').show();

  // Swap the visible link
  $('#button-edit-username').hide();
  $('#button-update').show();

});

$('#button-update').click(function() {

  // Hide the form again
  $('#editForm').hide();

  // Show the user list again
  $('.text-info-username').show();

  // Swap the visible link
  $('#button-update').hide();
  $('#button-edit-username').show();


  // Report success.. implement save function here
  var newName = $('#editTextBox').val();
  alert('Successfully edited .. '+ newName +' !');    

});

You can see the full example at https://jsfiddle.net/8xhwugvu/ , showing such an approach.