为什么在这里访问 firstElementChild 时会得到 null？

Question

I am following a tutorial where I have the following HTML

<template id="project-input">
  <form>
    <div class="form-control">
      <label for="title">Title</label>
      <input type="text" id="title" />
    </div>
    <div class="form-control">
      <label for="description">Description</label>
      <textarea id="description" rows="3"></textarea>
    </div>
    <div class="form-control">
      <label for="people">People</label>
      <input type="number" id="people" step="1" min="0" max="10" />
    </div>
    <button type="submit">ADD PROJECT</button>
  </form>
</template>

I want to take the form in this template and render it inside:

<div id="app"></div>

In my code I have the following class:

class ProjectInput {
    templateElm: HTMLTemplateElement;
    appElm: HTMLDivElement;
    element: HTMLFormElement;

    constructor() {
        //I start by getting a reference to the template
        this.templateElm = document.getElementById('project-input') as HTMLTemplateElement;

        //And a reference to the div
        this.appElm = document.getElementById('app') as HTMLDivElement;

        //I import the contents of the template
        const importedNode = document.importNode(this.templateElm, true);

        //And access the form which is the first child
        //This assignment becomes null for some reason
        this.element = importedNode.firstElementChild as HTMLFormElement;

        //I call the attach method which should render the form inside the div
        //This of course results in an error since this.element is null
        this.attach();
    }

    attach() {
        this.appElm.insertAdjacentElement('afterbegin', this.element);
    }
}

const p = new ProjectInput();

For some reason the assignment of this.element = importedNode.firstElementChild as HTMLFormElement; becomes null .

Can anyone figure out why?

Answer 1

I think the problem here is that you need to use another function istead of importNode() . I am not able to post comments, so here is my answer.

1. Please, check if importedNode is null.
2. Keep stuff much simpler: you only need to insertAdjacentElement , because the official MDN says

The imported node is not yet included in the document tree. To include it, you need to call an insertion method such as appendChild() or insertBefore() with a node that is currently in the document tree.

3. I suppose that firstElementChild is not working with Nodes, that are not appened. Maybe try importedNode.querySelector('form') instead of getting first element.

Answer 2

I think that the main issue here is because you put the form in a template and it's not an HTMLElement, it's actually an HTMLTemplateElement

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement

And there for you need the inside content (the final form html element), and insert it to document with append or prepend

So I would suggest to change little bit the code to

class ProjectInput {
    constructor() {
        this.templateElm = document.getElementById('project-input');

        this.appElm = document.getElementById('app');

        const importedNode = document.importNode(this.templateElm, true);

        this.element = importedNode.content;

        this.attach();
    }

    attach() {
        this.appElm.prepend(this.element);
    }
}