javascript - JQuery在克隆对象中查找嵌套元素返回未定义

Question

我是 jquery 的新手，无法弄清楚为什么它无法找到嵌套的 span 元素。我的HTML如下：

        <template id="repository_template">
          <section>
            <div>
              <div class="column">
                <img src="imgs/eyes.gif" alt="" width="20%">
              </div>
              <div class="column">
                <span id="title" class="title"></span><br>
                <span id="description" class="subtitle"></span>
              </div>
            </div>
          </section>
        </template>

        <div id="main">

        </div>

而且，我正在尝试查找title，description但结果未定义。我试过的：

// approach one

let appOne = $('#repository_template').clone();
let appOneTitle = appOne.find('#title');
console.log(appOneTitle.html());

// approach two
let $appTwo = $('#repository_template').clone();
let $appTwoTitle = $($appTwo).find('#title');
console.log($($appTwoTitle).html());

// approach three
let appThree = $('#repository_template').clone();
appThreeTitle = appThree.find('span');
console.log(appThreeTitle.html());

我想要完成的事情：

let repoTemplate = $('#repository_template').clone();
repoTemplate.find('#title').text('Hello');
repoTemplate.find('#description').text('World!');

$('#main').append(repoTemplate.html());

标签： javascripthtmljquery