JavaScript 中的 document.createElement 函数

Question

createElement() JavaScript 中的函数用于以编程方式将元素添加到 DOM。 它有一个必需的参数，即要创建的元素类型，例如 'div' 或者 'img'，例如下面的按钮创建并附加一个新的 <div> 元素。

下面是上述按钮的 HTML 和 JavaScript。

<div></div>
<button onclick="addElement()">Click to Add</button>

function addElement() {
  const doc = document.createElement('div');
  doc.innerHTML = 'Hello World';
  const container = document.querySelector('#append-elements');
  container.appendChild(doc);
}

递归 createElement()

一旦你创建了一个元素，你可以使用像这样的方法 appendChild() 创建和附加更多元素。

const parent = document.querySelector('#nested');

// Create one element...
const child = document.createElement('div');
child.innerText = 'I am the parent\'s child';

// Create another element
const grandchild = document.createElement('h1');
grandchild.innerText = 'I am the grandchild';

// Append 2nd element as a child of the 1st elemtn
parent.appendChild(child);
child.appendChild(grandchild);

下面是上述 JavaScript 的输出。

I am the parent's child