在 cloneNode 之后，纯 JS 中的“Node”类型上不存在属性“id”

Question

I've got a pure JS function that adds a message to the page based on a chunk of "template" HTML.

const setMessage = (msg, type, msg_ct) => {
    const msg_text = document.createTextNode(msg)
    const elementToCopy = document.querySelector('#js_message_template')
    const msg_container = document.querySelector('#js_message_container')
    const clone = elementToCopy.cloneNode(true)

    clone.id = `js_message_alert_${msg_ct}`
    clone.classList.add(`alert-${type}`)
    clone.appendChild(msg_text)
    msg_container.appendChild(clone);   
}

VS code is complaining about clone.id and clone.classList as a Node cannot have those properties.

Now every answer and tutorial I've seen about cloning a chunk of HTML like this basically says to do exactly what I'm doing.

I can also see this is a Typescript error, though as I understand it this powers the VS Code JS checks as well, so for the moment I assume it's a valid error (?)

It makes sense that a node wouldn't have an ID like this, but what is the correct way to set the ID and add a class to the outer element of this node when I am doing this? Again, all googling leads me to examples that do exactly what I am doing!

Answer 1

You could fix it by specifying what type it is with JSDOC for example:

/** @type {HTMLElement} */
const clone = elementToCopy.cloneNode(true);

A better way would be instanceof :

const clone = elementToCpoy.cloneNode(true);
if (clone instanceof HTMLElement) {
    ...
}

Answer 2

I assume you are cloning an HTMLElement (an HTMLElement derives from Element, which drives from Node).

Node doesn't have an id attributes, but HTMLElement (and also Element ) does.

All you have to do is tell the compiler the cloned node is something more specific than a Node . Eg

const clone = elementToCopy.cloneNode(true) as HTMLElement;

If you really want to be safe, you can explicitly check for it. Eg:

const clone = elementToCopy.cloneNode(true)
if (clone instanceof HTMLElement) {
  clone.id = `js_message_alert_${msg_ct}`
  ...
}

Up to you.