javascript - 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？

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

Answer 1

编辑、更新

jQuery 未在 jsfiddle 加载。另请注意，您之前在 document 前面添加了重复的 id； document 中的 id 应该是唯一的。设置唯一id时重新定义变量template，在元素处新建html。如果 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< 中包含的 #messageTemplate 的同级子元素 jQuery 对象。