动态 HTML 元素创建答案

【问题标题】：Dynamic HTML element creation动态 HTML 元素创建
【发布时间】：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>

提前致谢。

【问题讨论】：

你能把代码贴在这里吗？
你认为我们可以在没有看到它的情况下修复你的代码吗？
您的问题需要更清晰，以及您正在处理的部分或全部代码。

标签： javascript html css typescript dynamic

【解决方案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);

【讨论】：