(jQuery) Добавление текста стирает все остальное в div

Question

Я работаю над частью комментариев на моем сайте, и когда я динамически создаю тег anchor, но он не отображается.Возможно, потому что она стирается функцией .text(), вызываемой сразу после добавления ее к div.

Вот моя функция для создания div:

function createCommentDiv(userName, content, date)
{

avatarImage = $("<img/>")
    .attr('src', "{{ path('view_photo', {id: photo.id}) }}")
    .attr('width', 42)
    .addClass("avatar");

avatarDiv = $("<div/>")
    .addClass("avatar")
    .append(avatarImage);

userLink = $("<a/>")                       // this anchor 
    .attr("href", "../profile.html")       // does not show up
    .addClass("user")                      // in 
    .text(userName);                       // the DOM 

userWrapperDiv = $("<div/>")
    .addClass('wrapper')
    .append(userLink)
    .text(content);               // I think this cancels out the userLink anchor

dateDiv = $("<div/>")
    .addClass('date')
    .text(date);

contentDiv = $("<div/>")
    .addClass("content")
    .append(userWrapperDiv)
    .append($("<div/>").addClass('clear'))
    .append(dateDiv);

commentDiv = $("<div/>")
    .addClass("comment")
    .attr('style', 'background-color: lightgreen')
    .append(avatarDiv)
    .append(contentDiv)
    .append($("<div/>").addClass('clear'));

return commentDiv;
}

Это то, что он должен быть произведен:

<div class="comment" style="background-color: lightgreen ">
    <div class="avatar">
        <img src="/photo/34/view" class="avatar" width="42">
    </div>

    <div class="content">
        <div class="wrapper">
            <a href="../profile.html" class="user">Bob Smith</a>  // This link disappears from the DOM
                Reply 2
        </div>
        <div class="clear"></div>
        <div class="date">
            December 28 at 03:34 AM
        </div>
    </div>
    <div class="clear"></div>
</div>

Я думаю, это потому, что вызов.text(content) стирает anchor html, который ранее был добавлен к userWrapperDiv.Но я не знаю правильный способ сделать это тогда.

Вот изображение того, что происходит:

Как вы добавляете текст в конец div безстирать остальное содержимое ?

Answer 1

Вы можете попробовать использовать .append () вместо .text ()

Answer 2

.text() действительно заменит все содержимое элемента.Вместо этого вы можете добавить текстовый узел, используя document.createTextNode:

Заменить:

userWrapperDiv = $("<div/>")
    .addClass('wrapper')
    .append(userLink)
    .text(content);       

на:

userWrapperDiv = $("<div/>")
    .addClass('wrapper')
    .append(userLink)
    .append(document.createTextNode(content));

Вы также можетеиспользуйте .append(content) напрямую, но обратите внимание, что это добавит любой HTML , как , как .html() (в отличие от .text()).