javascript - 获取 Html 代码，替换部分并作为字符串存储在变量中而不更改 DOM 元素

Question

我有一个 DOM 元素

<div class="list-item">
  <div class="name"></div>
  <div class="id" data-id=""></div>
  <a href="">Link</a>
</div>

我想获得像 $('.list-item').html(); 这样的 HTML
然后我想用自己的变量填充数据属性和内容等部分，这样我就可以得到例如:

<div class="list-item">
  <div class="name">NAME CONTENT</div>
  <div class="id" data-id="123456">CONTENT</div>
  <a href="https://link.de">Link</a>
</div>

然后我想将它作为字符串存储在一个变量中

var htmlCode = '<div class="list-item">.....';

这里棘手的部分是在 Javascript 中执行 而不更改 DOM 元素。我希望得到帮助。谢谢!

Answer 1

您可以使用 .clone()克隆你的 div 然后使用 .attr()从 id 更改 attr类(class) 。
演示代码 :

var htmls = $(".list-item").clone()
$(htmls).find(".id").attr('data-id', 'somehting');
console.log($(htmls).html()) //store in variable..

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
  <div class="name"></div>
  <div class="id" data-id=""></div>
  <a href="">Link</a>
</div>