TypeScript element.append() method examples

Introduction

TypeScript, being a superset of JavaScript, incorporates its functions alongside type safety. One such powerful DOM manipulation tool is the append() method, enabling dynamic content addition to web pages.

TypeScript and append() Method

The append() method inserts nodes or string objects as the last child of a DOM element. Unlike appendChild(), append() can insert multiple items, including text, without requiring them to be nodes.

Basic Usage

const container = document.createElement('div');
container.innerHTML = 'Initial content';
document.body.append(container);
// Output: Adds 'Initial content' div to the body

Appending Multiple Elements

const item1 = document.createElement('p');
item1.textContent = 'First paragraph';
const item2 = document.createElement('h2');
item2.textContent = 'Heading';
document.body.append(item1, item2);
// Output: Appends a paragraph and a heading to the body

Appending Text and Elements Together

document.body.append('This is a text node', document.createElement('hr'));
// Output: Appends a text node followed by a horizontal rule to the body

Advanced Techniques

Using append() with Types

When using TypeScript, we often face the challenge of ensuring the elements we want to append are compatible with the expected types. This is where TypeScript’s type assertions can be beneficial.

const div = document.createElement('div') as HTMLDivElement;
const text: Text = document.createTextNode('Dynamic text') as Text;
div.append(text);
document.body.append(div);
// Output: Dynamically adds a div with text to the body, with type safety ensured

Appending Nodes in a Typed Array

// Typing an array of elements to be appended
const elements: (HTMLParagraphElement|HTMLSpanElement)[] = [];
const para = document.createElement('p') as HTMLParagraphElement;
para.textContent = 'Paragraph in an array';
elements.push(para);
const span = document.createElement('span') as HTMLSpanElement;
span.textContent = ' and a span';
elements.push(span);
document.body.append(...elements);
// Output: Appends a paragraph and a span from a typed array

Using append() in TypeScript Classes

class Component {
    element: HTMLElement;
    constructor(elementTag: string, content: string) {
        this.element = document.createElement(elementTag) as HTMLElement;
        this.element.textContent = content;
    }
    appendTo(parent: HTMLElement): void {
        parent.append(this.element);
    }
}
const newComponent = new Component('p', 'A paragraph component');
document.body.append(newComponent.element);
// Output: Adds a new paragraph component to the body

Conclusion

The append() method in TypeScript enriches DOM manipulation with type safety, allowing for more expressive and error-free coding. Through examples ranging from basic to advanced, we’ve seen how it can dynamically add elements and text, optimizing the user experience on web pages. Mastering append() opens up a world of possibilities for creating interactive and dynamic content.