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

Question

我正在尝试修改内存中模板的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？

我在这里创建了一个小提琴https://jsfiddle.net/d9s6twp1/5/

Answer 1

编辑，更新

jQuery没有加载到jsfiddle。 另请注意，您之前已将重复的id添加到document ; document id应该是唯一的。 在元素处设置唯一id ，新html时重新定义变量template 。 如果template html字符串变量中最初包含多个元素，则可以使用相同的过程; 即使用.filter() ，为元素创建唯一的id ，定义或重新定义引用克隆元素的每个变量名称

 var template = $("#template") .clone().removeAttr("id") .removeClass("hidden") .html(); console.log(template); // re-define `template` template = $(template).filter("#username") .attr("id", "username-" + $("[id^=username]").length) .html("new user"); console.log(template[0].outerHTML); $("#container").prepend(template) 

 .hidden{ display:none; } #container{ background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="template" class="hidden"> <span id="username">Test User</span> </div> <div id="container"> <br> <span>Element container</span> </div> 

jsfiddle https://jsfiddle.net/d9s6twp1/7/

---

messageTemplate似乎返回#messageTemplate元素的.html() ，即子元素.outerHTML ，而不是#messageTemplate元素。

尝试用.filter()代替.find()来过滤messageTemplate jQuery对象中包含的#messageTemplate子元素兄弟。

Answer 2

在子元素中使用class not 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);