调用appendChild报parameter 1 is not of type 'Node'错误如何解决

• 原生DOM API appendChild 要求入参必须是浏览器原生Node节点类型，但React.createElement返回的是React虚拟DOM元素对象，不属于原生Node类型，因此触发类型报错。
• 代码末尾console.log(header)引用了未声明的header变量，运行时会额外抛出ReferenceError。

方案1：使用React官方渲染API（推荐） #

项目基于React开发时，直接使用ReactDOM提供的挂载方法即可，不需要手动调用原生appendChild：

React 17及更早版本代码示例 #

import React from 'react';
import ReactDOM from 'react-dom';

const title = React.createElement(
  'h1',
  null,
  'Hello World',
);
ReactDOM.render(title, document.body);
console.log(title);

React 18+版本代码示例 #

import React from 'react';
import ReactDOM from 'react-dom/client';

const title = React.createElement(
  'h1',
  null,
  'Hello World',
);

const root = ReactDOM.createRoot(document.body);
root.render(title);
console.log(title);

方案2：使用原生DOM API创建节点 #

如果不需要使用React能力，可以直接创建原生DOM节点再插入：

function append(child) {
  document.body.appendChild(child);
};

const title = document.createElement('h1');
title.textContent = 'Hello World';
append(title);
console.log(title);

内容的提问来源于stack exchange，提问作者vietanh266