javascript - 如何修改变量内模板html的值

Question

我有一个获取不同描述和视频 url 地址的 Ajax 调用:

function TraerInstructivos() {
    $.ajax({
        type: "GET",
        url: '<%= Page.ResolveUrl("~/Instructivo/Instructivos.aspx") %>' + '/TraerInstructivos',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var res = JSON.parse(response.d);
            $.each(res, function (i, item) {
                DibujarVideo(item);
            });
        },
        error: function (response) {
            alert("Error");
        }
    });
};

现在 DibujarVideo 是获取我在 ascx 中的模板、制作副本然后附加它的方法。这是 ascx 的 HTML:

<div id="Videos">

</div>

<template id="video-elem">
    <div class="row">
        <div class="col-lg-4">
            <font id="video-desc" size="3"></font>
            <br />
            <br />
            <p><a id="video-ref" class="btn btn-secondary" href="#" role="button">Mira el Video &raquo;</a></p>
        </div>
    </div>
    <br />
    <hr />
</template>

现在，复制模板 html 的方法如下所示:

function DibujarVideo(video) {
    var elemACrear = $("#video-elem").html();

    $(elemACrear).find("#video-ref").attr("href", video.DireccionVideo);

    console.log(elemACrear);

    $("#Videos").append(elemACrear);

}

我在控制台日志和页面中看到的是 href 的值没有变化，但是如果我将其保存在变量中，我会看到变化，例如:

var elem = $(elemACrear).find("#video-ref").attr("href", video.DireccionVideo);

所以我认为在页面中更改/操作 DOM 树与在变量中更改/操作不同。

如何更改 elemACrear 变量中的 href？

我正在学习 jQuery，感谢您的帮助。

Answer 1

您已经诊断并解决了问题，但没有完全遵循逻辑。您只需将在 elem 变量中创建的 jQuery 对象提供给 append() 调用，如下所示:

function DibujarVideo(video) {
  var elemACrear = $("#video-elem").html();
  var $elem = $(elemACrear);
  $elem.find("#video-ref").attr("href", video.DireccionVideo);
  $("#Videos").append($elem);
}