你可以使用 JavaScript 动态生成 HTML 内容并将其添加到一个盒子（如 <div>）中。下面是一个示例，展示如何将 dialogData.data 中的内容展示在一个盒子里。
假设你有一个包含数据的对象 dialogData，并希望把这些数据放入一个 <div> 盒子中，你可以这样做：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态展示</title>
<style>
.box {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
width: 300px;
height: auto; /* 根据内容高度自适应 */
}
</style>
</head>
<body>
<div id="output" class="box"></div>
<script>
// 示例数据
const dialogData = {
data: [
"第一条对话",
"第二条对话",
"第三条对话"
]
};
// 获取输出的 div
const outputDiv = document.getElementById('output');
// 遍历 dialogData.data 并生成 HTML
for (let i = 0; i < dialogData.data.length; i++) {
// 创建一个新的段落元素
const p = document.createElement('p');
// 设置段落文本为当前对话内容
p.textContent = dialogData.data[i];
// 将段落添加到输出 div 中
outputDiv.appendChild(p);
}
</script>
</body>
</html>
在这个示例中：
- 我们创建了一个带有边框和填充的盒子。
- 使用 JavaScript 遍历
dialogData.data数组，将每一项作为<p>元素添加到盒子中。 - 最后，所有的对话都会显示在指定的
<div>盒子内。
你可以根据需要调整样式和结构。
内容由零声教学AI助手提供，问题来源于学员提问
{
debugger
const sourceNode = this.dataInfo.find(
(item) => item.id === info.sourceId
);
if (sourceNode.to.includes(info.targetId)) {
..." />
