javascript - 使用 jQuery 和 HTML 添加到 div

Question

所以我的代码有一些问题。我正在尝试删除一个链接 (a)，然后添加一个包含不同文本的新链接 (a)。

这是代码

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>

脚本:

$('#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

我认为您的报价有问题。这是您的 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');

});

还有一个 jsFiddle:http://jsfiddle.net/qhcf39oo/