---
id: 587d7fa6367417b2b2512bc2
title: Add Document Elements with D3
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Добавление элементов документа с помощью D3
---
## Description
D3 имеет несколько методов, которые позволяют добавлять и изменять элементы в документе. Метод select() выбирает один элемент из документа. Он принимает аргумент для имени нужного элемента и возвращает узел HTML для первого элемента в документе, который соответствует имени. Вот пример: const anchor = d3.select("a"); Приведенный выше пример находит первый якорный тег на странице и сохраняет узел HTML для него в переменном anchor . Вы можете использовать выделение с помощью других методов. Часть «d3» в примере является ссылкой на объект D3, так как вы получаете доступ к методам D3. Два других полезных метода: append() и text() . Метод append() принимает аргумент для элемента, который вы хотите добавить в документ. Он добавляет узел HTML к выбранному элементу и возвращает дескриптор этого узла. Метод text() либо задает текст выбранного узла, либо получает текущий текст. Чтобы установить значение, вы передаете строку в качестве аргумента внутри круглых скобок метода. Вот пример, который выбирает неупорядоченный список, добавляет элемент списка и добавляет текст: d3.select ( "UL")
.append ( "Ли")
.text («Очень важный элемент»);
D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке.
## Instructions
Используйте метод select для выбора тега body в документе. Затем append к нему тег h1 и добавьте текст «Learning D3» в элемент h1 .
## Tests
```yml
tests:
- text: body должно иметь один элемент h1 .
testString: 'assert($("body").children("h1").length == 1, "The body should have one h1 element.");'
- text: Элемент h1 должен иметь в нем текст «Learning D3».
testString: 'assert($("h1").text() == "Learning D3", "The h1 element should have the text "Learning D3" in it.");'
- text: Ваш код должен получить доступ к объекту d3 .
testString: 'assert(code.match(/d3/g), "Your code should access the d3 object.");'
- text: Ваш код должен использовать метод select .
testString: 'assert(code.match(/\.select/g), "Your code should use the select method.");'
- text: Ваш код должен использовать метод append .
testString: 'assert(code.match(/\.append/g), "Your code should use the append method.");'
- text: Ваш код должен использовать text метод.
testString: 'assert(code.match(/\.text/g), "Your code should use the text method.");'
```
## Challenge Seed
## Solution
```js
// solution required
```