Javascript jQuery如何修改内存中克隆元素的html

我试图在内存中修改模板的html，然后将其前置到另一个html元素

var messageTemplate = $("#messageTemplate").clone()
                          .removeAttr('id').removeClass("hidden").html();
var timeStamp = message.TimeStamp;
console.log(timeStamp)
var relativeTime = moment(timeStamp, "YYYYMMDD").fromNow();

$(messageTemplate).find("#message").html(message.Data)
$(messageTemplate).find("#moment").html(relativeTime);
$(messageTemplate).find("#senderName").html(message.SenderUser.Username);

$("#message-dropdown").prepend(messageTemplate);

抓取模板并对其进行预处理效果很好，但是html是原始模板，即使我正在设置html，它也不会被修改。有人能解释一下如何正确设置克隆元素的html吗

---

我在这里创建了一个fiddle

在子元素中使用类而不是Id

var messageTemplate = $("#messageTemplate").clone()
                          .removeAttr('id').removeClass("hidden").html();
var timeStamp = message.TimeStamp;
console.log(timeStamp)
var relativeTime = moment(timeStamp, "YYYYMMDD").fromNow();

$(messageTemplate).find(".message").html(message.Data)
$(messageTemplate).find(".moment").html(relativeTime);
$(messageTemplate).find(".senderName").html(message.SenderUser.Username);

$("#message-dropdown").prepend(messageTemplate);

编辑，更新

jQuery未在JSFIDLE上加载。还要注意的是，您以前在文档中预先添加了重复的ID；文档中的id应该是唯一的。在元素处设置唯一id、新html时重新定义变量模板。如果模板html字符串变量中最初包含多个元素，则可以使用相同的过程；即使用.filter，为元素创建唯一id，定义或重新定义引用克隆元素的每个变量名

var template=$template .clone.removeAttrid .removeClasshidden .html； console.logtemplate； //重新定义`模板` template=$template.filterusername .attrid，username-+$[id^=username].length .htmlnew用户； console.logtemplate[0].outerHTML； $container.prependtemplate .隐藏{ 显示：无； } 容器{ 背景颜色：蓝色； } 测试用户 元素容器

---

只是想知道这将如何改变任何事情，我在messageTemplate上调用find，这是html的一个封闭部分。因此，当搜索它时，它应该找到正确的元素messageTemplate，它似乎返回messageTemplate元素的.html，即子元素.outerHTML，而不是messageTemplate元素。你能在问题中包含html吗？@johnny5我试过得到同样的结果，你能在stacksnippets、JSFIDLE中重现问题吗？在问题中包含html吗？啊，所以问题是我没有在filter@johnny5是的，文档中有重复的ID ID ID不会导致附加问题，只有在再次检索它们时，对吗？@johnny5否，文档中的id应该是唯一的，请参阅