如何使用jQuery处理包含模板文本的HTML元素？

我之前用以下代码实现带数据的HTML元素渲染：

<div id="parent">
  <span>loading...</span>
</div>

<script>
  var data="im data";
  $("#parent").html(`<span>${data}</span>`);
</script>

但这种方式需要重复编写<span>元素，后期修改十分不便。因此我尝试直接复用已有元素，不用重新编写，代码如下：

<div id="parent">
  <span>${data}</span>
</div>

<script>
  var data="im data";

  $("#parent").html($("#parent").html());

  // 实际显示的是${data}，而非预期的im data
</script>

但未达到预期效果。

解决方案（感谢Carsten Massmann提供） #

以下是支持单对象和数组对象数据渲染的实现代码，无需重复编写HTML模板：

JavaScript 代码

const data={id:"1",name:"john doe"};
const datas=[
  {id:"1",name:"hasan"},
  {id:"2",name:"salim"}
];

passData($("#parent"),data);
passDatas($("#parent2"),datas);
// 使用示例

function passDatas(parent,data){
    if(parent.data("_html_temp")==undefined){
        parent.data("_html_temp",parent.html());
    }

    parent.html("");
    data.forEach((obj)=>{
      parent.append(parent.data("_html_temp").replace(/\$\{([^}]+)\}/g,(_,n)=>obj[n]));
    })
  }
  
function passData(parent,data){
    if(parent.data("_html_temp")==undefined){
        parent.data("_html_temp",parent.html());
    }
    parent.html(parent.data("_html_temp").replace(/\$\{([^}]+)\}/g,(_,n)=>data[n]));
  }

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

单对象渲染
<div id="parent">
   <div>
    <span>id:${id}</span>
    <span>name:${name}</span>
   </div>
</div>

<br>
<br>

数组对象渲染
<div id="parent2">
   <div>
    <span>id:${id}</span>
    <span>name:${name}</span>
   </div>
</div>

内容的提问来源于stack exchange，提问作者M HASANUDDIN Web Developer Ben