创建元素

这是一个创建 div、向其中添加一些文本，并将其作为 body 的最后一个元素追加的示例。

var div = document.createElement('div');
div.textContent = "Sup, y'all?";
div.setAttribute('class', 'note');
document.body.appendChild(div);

因此，`document.createElement` 用于创建带有 HTML 标签的元素。然后修改 `textContent`，接着使用 `setAttribute` 修改 class 属性。这同样可用于添加 data 属性或任何其他类型的属性，就像在 HTML 中一样！最后，使用 body 元素的 `appendChild` 方法将元素追加到 body 中。

这基本上等同于 `<div class="note">Sup, y'all?</div>`。

事实上，所有元素都具有 `appendChild` 方法，因此在执行上述操作后，可以执行以下操作：

var span = document.createElement('span');
span.textContent = "Hello!";
div.appendChild(span);

将 span 添加到 div 元素的末尾。

移除元素

移除元素同样有趣。每个 DOM 元素都有一个属性，该属性实际上是 DOM 元素的父元素。要移除一个元素，你需要调用父元素的 `removeChild` 方法，并将要移除的子元素作为参数传递。类似这样：

div.parentNode.removeChild(div);

很简单，不是吗？

使用 jQuery 创建

另一种选择是使用 jQuery 的元素创建语法。此示例结合了以上示例的功能：

var div = $('<div/>').text("Sup, y'all?").appendTo(document.body);
$('<span/>').text('Hello!').appendTo(div);