动态 HTML 元素创建

Posted 2023-03-13

【中文标题】动态 HTML 元素创建

【英文标题】：Dynamic HTML element creation

【发布时间】：2019-04-03 11:38:37

【问题描述】：

我在将元素大小的数量更改为更多的同时动态创建了 html 画布元素，它使用以前创建的元素而不是创建所有新对象，因此绑定也没有清除。

这是我的代码

<ng-container *ngFor="let i of rows; let i=index">
    <ng-container *ngFor="let j of cols; let j=index">
      <div id="Div(i * cols.length) + j">
        <canvas id="Canv(i * cols.length) + j" style="position: absolute"></canvas>
      </div>
    </ng-container>
  </ng-container>

提前致谢。

【问题讨论】：

你能把代码贴在这里吗？

你认为我们可以在没有看到它的情况下修复你的代码吗？

您的问题需要更清晰，以及您正在处理的部分或全部代码。

【参考方案1】：

如果您不是每次都创建一个新元素，您会发现所有修改都是针对同一个引用进行的，如下所示：

let div = document.createElement('div');

function addElement(w: number, h: number) 
    div.style.backgroundColor = 'aqua';
    div.style.width = w + 'px';
    div.style.height = h + 'px';

    document.body.appendChild(div);


addElement(100, 100);

addElement(20, 20);

这是一个工作版本，每次都会创建一个新元素...

function addElement(w: number, h: number) 
    const div = document.createElement('div');
    div.style.backgroundColor = 'aqua';
    div.style.width = w + 'px';
    div.style.height = h + 'px';

    document.body.appendChild(div);


addElement(100, 100);

addElement(20, 20);