javascript - 在js中使用cloneNode方法时，为什么不能设置节点克隆的ID？

我正在尝试使用cloneNode方法创建div元素的克隆，然后我想使用setAttribute方法设置克隆的ID，但出现此错误：

属性“ setAttribute”在类型“节点”上不存在。



这是我的HTML：

<div id="containerParentId" class="row boundary">

<div class="col no-padding" id="containerId"
(drop)="onDrop($event)"
(dragover)="onDragOver($event)"
(dragleave)="onLeave($event)">

    <div class="vl" id="verticalLine" ></div>

    <div id="divTable" class="tableOnePosition"
    draggable="true"
    (dragstart)="onDragStart($event)"
    (drag)="onDrag($event)"
    (dragend)="onDragEnd($event)"

    ></div>
</div>

这是js代码：

let clone = document.getElementById('divTable').cloneNode(true);

clone.setAttribute('id','newId');

我正在使用Angular作为我的前端框架。

我已经阅读了有关此问题的不同问题，据我所知应该是可能的。这个问题的一个例子：Is it possible to clone html element objects in JavaScript / JQuery?

最佳答案

.cloneNode()返回一个Node，但是.setAttribute()仅在Element（或其派生类型）上可用。这就是TypeScript用警告/错误告诉您的内容。

您必须告诉TypeScript，由.cloneNode()返回的节点实际上是Element / HTMLElement / HTMLDivElement。为此，TypeScript知道Type assertions的概念（就像其他语言中的类型转换一样）。

有两种形式可以指定类型：


< Type >-> const d = <HTMLDivElement> document.querySelector("div")
as-> const d = document.querySelector("div") as HTMLDivElement


您的脚本将如下所示：

const clone = <HTMLDivElement> document.getElementById('divTable').cloneNode(true);

要么

const clone = document.getElementById('divTable').cloneNode(true) as HTMLDivElement;

TypeScript Playground中的示例