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

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

Answer 2

编辑、更新

jQuery 未在 jsfiddle 中加载。另请注意，您之前在 document 之前添加了重复的 id； document 中的 id 应该是唯一的。设置unique id时重新定义变量template，在element处新建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 元素的 return .html() 中，即子元素 .outerHTML，而不是 #messageTemplate 元素。

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

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

jQuery How To Modify html of a cloned element in memory

html

javascript

jquery

clone