ReactJS使用了virtual DOM，这意味着你不能像使用HTMLElement一样使用ReactNode（从JSX表达式返回的内容）。正确的做法如下：

import {useState} from "react";
function App() {
  function createTask(){
    setTasks(tasks.concat({properties: "describing the task"});
  }
  const [tasks, setTasks] = useState([]);

  return (
    <div className='app'>
      <div id='mainPanel'>
        <button onClick={createTask}>create</button>
      </div>
      <div className='tasksList'>
        {tasks.map(task => <Task task={task} />)}
      </div>
    </div>
  )
}

基本上创建一些状态，而不是试图直接操作DOM，更新状态。
顺便说一下，你上面的代码可以在没有虚拟DOM的框架中工作，例如here is it working in SolidJS，但即使这样我也不推荐这种方法，因为它很难跟踪你的状态，而且大多数情况下，使用声明式框架是失败的。

问题是，你试图插入一个JSX组件到DOM中，但这是不可能的。
如果你的目标是有一个任务列表，并有一个按钮添加到列表中的任务，你可以使用下面的代码。
此代码包含一个react状态，它是一个任务数组。默认情况下，此数组为空。
当您单击按钮添加任务时，我们使用setState函数在数组（{name：“新任务”}）。
然后在代码中，为了呈现数组中的所有任务，我们只需Map任务。

import React, {useState} from 'react'

    function Task() {
      return (
        <div className="Task">
          <input />
          <button>Delete</button>
        </div>
      );
    }

    function App() {
      const [tasks, setTasks] = useState([]);

      function createTask() {
        setTasks(prevState => ([
          ...prevState,
          {name: "New task"}
        ]);
      }

      return (
        <div className="app">
          <div id="mainPanel">
            <button onClick={createTask}>create</button>
          </div>
          {tasks?.length
            ? <div className="tasksList">
                {tasks.map((task, index) => (
                  <Task key={index} />
                )}
              </div>
            : null
          }
        </div>
      )
    }

    export default App