.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
- Career path
Computer Science
Looking for an introduction to the theory behind programming? Master Python while learning data structures, algorithms, and more!Includes 6 CoursesWith Professional CertificationBeginner Friendly75 hours - Free course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner Friendly15 hours