javascript - 将包含 的 div 文本替换为图标

Question

我想替换 div 的整个文本，但不删除其中的 span。

一旦用户点击 ul 中的某个元素，我就必须替换以下 div 中的文本(“Yourself”):

<div style="display: inline">
    <div class="text-light" style="float: left">Post as: </div>
    <div class="link toggle-post" style="float: right" >
        Yourself
        <span id="dropdownIcon" class="ui-icon-dropdown"></span>
    </div>
</div>

我使用以下代码:

$('[data-postas]').click(function changeHeader(event){
    var element = $(event.srcElement);
    $('.toggle-post').text().replace($('.toggle-post').text(), element.text());
    $('#postAs').val(element.attr('data-postas'));
    if (element.attr('data-company')){
        $('#company').val(element.attr('data-company'));
    }

    $('.icon-cheack').remove();
    element.append('<i class="icon-cheack fright"></i>');
    setTimeout(function() {
        $(".ul-post").toggle();
    }, 500);
    $('#dropdownIcon').addClass('ui-icon-dropdown');
})

文本未被替换

Answer 1

作为@BeNdErR的悲伤，保存span，放置图标，添加回span:

//Save the old one
var span = $('#dropdownIcon');
//Empty the div
$('.toggle-post').empty().append('<i class="icon-cheack fright"></i>').append(span);