如何修改变量中HTML模板的元素属性？jQuery技术求助

我来帮你分析一下问题所在，你遇到的情况其实是字符串形式的HTML和DOM对象之间的区别导致的：

你现在的代码里，elemACrear = $("#video-elem").html() 得到的是一段字符串，当你执行 $(elemACrear) 时，jQuery会把这段字符串转换成一个内存中的DOM对象，你修改这个DOM对象的href属性后，并没有把修改后的DOM对象再同步回elemACrear变量——因为elemACrear还是原来的字符串，所以你append它的时候，自然还是未修改的原始内容。

下面给你两种可行的修改方案：

方案一：直接操作DOM对象并追加（推荐） #

这种方式更简洁，直接把转换后的DOM对象保存下来，修改后直接append这个对象，不用再处理字符串：

function DibujarVideo(video) {
    // 把模板内容完整复制为jQuery DOM对象
    var $elemACrear = $("#video-elem").contents().clone();
    // 修改a标签的href属性
    $elemACrear.find("#video-ref").attr("href", video.DireccionVideo);
    // 同时设置视频描述文本（你原来的代码里漏掉了这一步）
    $elemACrear.find("#video-desc").text(video.Descripcion);
    // 把修改后的DOM对象追加到页面容器
    $("#Videos").append($elemACrear);
}

这里用$("#video-elem").contents().clone()替代html()，能更完整地复制模板内的所有内容，避免遗漏节点细节。

方案二：修改DOM对象后转回字符串更新elemACrear #

如果你一定要更新elemACrear变量的话，可以把修改后的DOM对象重新转回字符串：

function DibujarVideo(video) {
    var elemACrear = $("#video-elem").html();
    // 将字符串转为jQuery DOM对象并修改属性
    var $elem = $(elemACrear);
    $elem.find("#video-ref").attr("href", video.DireccionVideo);
    $elem.find("#video-desc").text(video.Descripcion);
    // 把修改后的DOM对象转回字符串，更新elemACrear
    elemACrear = $elem.prop('outerHTML');
    // 现在追加的就是修改后的内容了
    $("#Videos").append(elemACrear);
}

最后给你提个小建议：模板里的id="video-desc"和id="video-ref"，当你多次复制模板后，页面上会出现多个相同ID的元素，这不符合HTML规范哦。建议改成class属性，比如class="video-desc"，然后用.find(".video-desc")来选择元素，这样代码会更规范健壮。

内容的提问来源于stack exchange，提问作者Nickso