从 DOM 中读取 HTML 片段并向其中添加自定义数据

Posted 2023-05-09

【中文标题】从 DOM 中读取 HTML 片段并向其中添加自定义数据

【英文标题】：Read HTML snippet from DOM and add custom data to it

【发布时间】：2020-04-04 22:34:40

【问题描述】：

我习惯于使用 jQuery 通过元素的 id 来查询元素，并在元素内部或属性中放置一些从 web 服务检索到的自定义数据。

但是现在我要检索的数据是一个对象数组。因此，这不仅仅是将一个数据添加到一个元素中的问题。我需要阅读一个li，它里面有一些 html，然后用一个对象的数据替换这个 HTML 上的一些元素。

这必须为数组中的每个对象完成，所以我需要从那个“模板”创建一个新的li，填充它，然后将它添加到ul。

我能够查询ul，找到它的li 并将其从DOM 中删除，并将多个lis 添加到它。

但我不知道如何在 jQuery 对象中使用 li 来更改其 innerHTML。这是我丢失的部分，因为我仍然无法在 Google 上找到解决方案。

这是一个例子：https://jsfiddle.net/r76vpLdg/

如何根据template 创建一个新对象并替换这两个spans 的内容？我添加了第二个列表，其中包含所需结果的示例。

【问题讨论】：

看起来你只是在寻找这个：api.jquery.com/clone

【参考方案1】：

这是一个使用 JSON 对象作为数据源和模板字符串的 Vanilla JS 解决方案。

除非必须使用 jQuery，否则在这种情况下没有理由使用它。

<p>template:</p>
<ul id="myListContainer">

</ul>

<button onclick="createTemplateStrings()">
START
</button>

function createTemplateStrings ()

var obj = [
"name": "John", "weekday" : "Wednesday",
"name": "Marry", "weekday" : "Sunday",
"name": "Edward", "weekday" : "Friday",
"name": "Jack", "weekday" : "Tuesday"
]

let ul = document.getElementById('myListContainer')

for(let row of obj)

let li = document.createElement('LI')
li.innerHTML = `Hello, $row.name, how's your $row.weekday ?`
ul.append(li)

【讨论】：

谢谢！所以，我无法从 DOM 中读取 li 的 HTML，我必须将它完全包含在 javascript 中吗？这将是一个非常大的 HTML，并且有大约 4 个 spans 需要自定义，所以我想避免在 javascript 中使用完整的内部 HTML。

我不太清楚你的意思？您有 4 个静态 LI 并想更改 InnerHTML 吗？为什么不简单地给他们 ID 并更改 innerHtml ？

对不起。在示例中，我有一个模板 li，其内部 HTML 中有 2 个 span。我需要使用对象的属性更改这些跨度的值。

【参考方案2】：

您可以“在内存中”创建元素而不将它们作为 DOM 的一部分，构建它们，然后根据需要将它们添加到 DOM，例如：

 var li = `$("<li>"); 
 li.html(innerHTML); 
 ul.append(li);

工作示例：

var ul = $("ul");

$("button").click(function() 
  var li = $("<li>");
  li.text("new item");

  ul.append(li);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>item</li>
</ul>
<hr/>
<button type='button'>add</button>

要使用现有的“模板”，您可以.clone() 现有的li 并进行更改，一种可能的解决方案/示例：

var ul = $("ul");

$("button").click(function() 
  // create a copy of the "template"
  var li = ul.find("li.template").clone().removeClass("template");  
  
  // make changes 
  li.find("span").removeClass("first").addClass("new").text("new");

  ul.append(li);
);

li>span.first  color: blue; 
li>span.new   color: green; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class='template'>This is the <span class='first'>first</span> item</li>
</ul> 
<hr/>
<button type='button'>add</button>

【讨论】：

谢谢。这是简单的部分，删除和添加元素到 ul。我不知道如何克隆模板并更改其跨度的值。

我不能只创建新的基本lis，因为我需要为 web 服务列表中的每个对象更改其跨度值。

从您的其他评论中，假设“模板”可能非常大，您需要 .clone 模板然后对该副本进行更改。更新了一个例子。

本质上，它的工作方式完全相同 - 变量将存储对内存中元素的引用，而不是对已经在 DOM 中的元素的引用。