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的{{1}} html。但是我不知道这样做的正确方法。

以下是发生的情况：

您如何在div的末尾添加文本而又不删除其余内容？

Answer 1

.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()）

Answer 2

您可以尝试使用.append（）而不是.text（）

（jQuery）添加文本会擦除div中的所有其他内容

2 个答案: