- Objective:
- Breadcrumb: DOM - Document - 实例方法
# 概念阐释
## 语义
`.createElement()`通过JavaScript创建新的HTML标签。
## 语法
```js
var element = document.createElement(tagName);
```
# 实例
定义一个变量名为`paragraph`的变量，创建一个新的`<p>`标签。
```js
let paragraph = document.createElement('p');
```
给标签定义一个ID属性
```js
paragraph.id = 'info';
```
创建标签内的内容
```js
paragraph.innerHTML = 'The text inside the paragraph.'
```
将`<p>`附加到`<body>`父节点下
```js
document.body.appendChild(paragraph);
```
# 相关内容
[[js DOM 附加或移除子节点]]
# 问题
- [练习题](https://www.codecademy.com/courses/build-interactive-websites/lessons/javascript-dom/exercises/create-element)
将新创建的`<li>`标签附加到id为`italy-attractions`的父节点下。
# 问题答案
```js
let newAttraction = document.createElement('li');
newAttraction.id = 'vespa';
newAttraction.innerHTML = 'Rent a Vespa';
document.getElementById('italy-attractions').appendChild(newAttraction);
```
# 参考资料
- [Document.createElement()-MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement)