JavaScript:D3 .append()
Published Jan 3, 2024
Contribute to Docs
The .append() function is used to append a new element to the HTML tag name as given in the parameters to the end of the element. If the type that is given is a function then it must be evaluated for each element that is in the selection.
Syntax
selection.append(type);
type: This parameter takes a string that defines the type of the element.
Example
Here’s a simple HTML code that demonstrates the use of .append():
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="https://d3js.org/d3.v5.min.js"></script></head><body><script>let bodySelection = d3.select('body');// Append a new paragraph to the bodybodySelection.append('p').text('This is a new paragraph added using D3.js');</script></body></html>
In this example, D3.js selects the <body> element and appends a new <p> (paragraph) element to it. The .text() method is then used to set the text content of the newly appended paragraph.
The output of the mentioned code is as follows:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn JavaScript:D3 on Codecademy
- Looking for an introduction to the theory behind programming? Master Python while learning data structures, algorithms, and more!
- Includes 6 Courses
- With Professional Certification
- Beginner Friendly.75 hours
- Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.
- Beginner Friendly.15 hours