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);