Question

我遇到附加问题我认为，说实话我真的不知道我的问题在代码中的位置，但我无法使其工作。首先，我将向您展示我的代码，然后我会尽力解释我的问题。

$('.dynamic').append('<div class="clipboardContent"></div>').html(window[recentPerson].fullname + '<br><span style="color:lightgray; font-size:10pt">' + window[recentPerson].mail + '</span>');
$('.dynamic').append('<div class="clipboardContent">HI</div>');

所以你在这里看到的是两段代码。第一个是我想要工作的但却没有。第二个更简单，但确实有效。我的问题是，如果我点击一个按钮，它可以在类的clipboardContent中创建一个div，里面有一些文本（这仍然有效），但如果我再次点击它不会添加一个新的（但第二个代码可以）。我希望有人可以解释为什么第一个代码只能运行一次。

PS。如果您还有其他问题，或者您需要更多代码/解释我的问题，请随时告诉我。

Answer 1

您遇到的问题是append()方法返回最初选择的元素。在您的情况下，这是.dynamic元素。在追加后，您设置html()的{{1}}，然后覆盖.dynamic中添加的div。

要执行您需要的操作，您可以在追加之前单独创建append()元素：

div

Working example

或者您可以保留当前的方法并将HTML包含在要追加的字符串中：

$('<div />', {
    class: 'clipboardContent',
    html: window[recentPerson].fullname + '<br><span style="color: lightgray; font-size: 10pt">' + window[recentPerson].mail + '</span>'
}).appendTo('.dynamic');

另外，作为旁注，您应该在内联$('.dynamic').append('<div class="clipboardContent">' + window[recentPerson].fullname + '<br><span style="color:lightgray; font-size:10pt">' + window[recentPerson].mail + '</span></div>');属性上使用元素上的CSS类。这样，您可以在一个地方进行所有样式更改，而不必修改JS文件以影响样式规则。

Answer 2

只使用.append()，而不是.html()，因为它会覆盖.append()

添加的先前内容

$(".dynamic").append('<div class="clipboardContent">YOUR_CONTENT</div>');

无法以正确的方式使用append（）

2 个答案: