我正在嘗試<template>使用 jQuery操作元素內部，但不幸的是，某些功能（如find()不適用于子元素）。
如何替換.name此模板的類文本并將其附加到另一個 html 元素內部？
<template id="conversationTemplate">
<div class="card conversation mb-1">
<div class="name">##name##</div>
</div>
</template>
uj5u.com熱心網友回復：
我們這里有一個簡單的解決方案，只使用 JQuery。四行，但只需幾個步驟，我們就可以為喜歡的人制作單行。
$(() => {
const $templateTag = $('#conversationTemplate');
const $clonedContent = $($('#conversationTemplate').html());
$clonedContent.find('.name').html('other text here');
$templateTag.wrap('<template id="conversationTemplate"></div>').parent().html($clonedContent);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="conversationTemplate">
<div class="card conversation mb-1">
<div class="name">##name##</div>
</div>
</template>uj5u.com熱心網友回復：
您不能直接在模板上使用 jQuery 選擇器函式。你需要先決議這個。
var tpl = $('#conversationTemplate')[0].outerHTML;
$template = $($.parseXML(tpl)).contents();
console.log($template.find('.name').html());<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="conversationTemplate">
<div class="card conversation mb-1">
<div class="name">##name##</div>
</div>
</template>uj5u.com熱心網友回復：
您可以在 jQuery 中執行此操作，但您不需要這樣做。這是普通的 javascript，也可以正常作業。
var template = document.getElementById('conversationTemplate');
var html = template.innerHTML.replace('##name##', 'Jane');
var target = document.getElementById('the-other-element-you-mention');
target.innerHTML = html;
它做了你問的兩件事：
- 獲取模板 HTML 并替換名稱。
- 用這個新的 HTML 更新另一個元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/406257.html
標籤：