---
id: 62a115879a6d51422652cbfc
title: 步骤 2
challengeType: 0
dashedName: step-2
---

# --description--

在 `#game` 元素中创建四个 `div` 元素。 按顺序为它们提供以下相应的 `id` 值：`stats`、`controls`、`monsterStats` 和 `text`。

# --hints--

应该创建四个新的 `div` 元素。

```js
assert.equal(document.querySelectorAll('div')?.length, 5);
```

应该为新的 `div` 元素之一提供 `id` 设为 `stats`。

```js
assert.exists(document.querySelector('div#stats'));
```

应该为新的 `div` 元素之一提供 `id` 设为 `controls`。

```js
assert.exists(document.querySelector('div#controls'));
```

应该为新的 `div` 元素之一提供 `id` 设为 `monsterStats`。

```js
assert.exists(document.querySelector('div#monsterStats'));
```

应该为新的 `div` 元素之一提供 `id` 设为 `text`。

```js
assert.exists(document.querySelector('div#text'));
```

应该以正确的顺序放置新的 `div` 元素。

```js
function __t(a, b) {
  return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b;
}
assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text'));
```

应该将新的 `div` 元素放在 `#game` 元素中。

```js
assert.equal(document.querySelector('#game')?.children?.length, 4);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
</head>
--fcc-editable-region--
<body>
  <div id="game">
  </div>
</body>
--fcc-editable-region--
</html>
```
