Programmatically create and append a div in TypeScript

WHAT THIS TESTS: This question probes your fluency with the DOM API in a TypeScript context, specifically whether you know the concrete DOM interfaces involved rather than falling back on generic any types. It checks if you understand the type hierarchy, safe mutation patterns, and the difference between modern and legacy insertion methods.

A GOOD ANSWER COVERS: A strong answer walks through four steps in order. First, you reference an existing parent element, typically typed as HTMLElement or Element. Second, you call document.createElement with the tag name div, which TypeScripts lib.dom.d.ts overloads to return a specific HTMLDivElement rather than a generic Element. Third, you mutate the new node by adding a CSS class via classList.add or the className property, and you set its text using textContent instead of innerHTML to avoid XSS risks and unnecessary HTML parsing. Fourth, you insert the node into the tree using parent.append or parent.appendChild, noting that append accepts multiple arguments including strings while appendChild returns the appended node. Throughout, you explicitly name the DOM types: Document for the document object, HTMLDivElement for the created div, and HTMLElement or Element for the parent.

COMMON WRONG ANSWERS: Red flags include using innerHTML to inject plain text, which is a security anti-pattern and slower than textContent. Another warning sign is typing the created element as any or generic Element instead of HTMLDivElement, showing a lack of familiarity with TypeScripts built-in DOM typings. Confusing the Node, Element, and HTMLElement hierarchy is also problematic, such as insisting the parent must be an HTMLElement when Element suffices. Finally, using innerText instead of textContent without understanding the performance and visibility differences, or suggesting jQuery-style HTML string insertion when the question asks for programmatic node creation.

LIKELY FOLLOW-UPS: Expect the interviewer to ask why textContent is preferred over innerHTML or innerText. They may also ask about the difference between append and appendChild, including return values and whether strings can be passed. A deeper TypeScript question might be how createElement knows to return HTMLDivElement, which leads into discussing lib.dom.d.ts overloads. You might also be asked how to optimize creating many elements, which is a chance to mention DocumentFragment to minimize reflow.

ONE CONCRETE EXAMPLE: Here is a concise TypeScript snippet. const parent = document.getElementById('container') as HTMLElement; const div = document.createElement('div'); div.classList.add('status'); div.textContent = 'Connected'; parent.append(div); In this block, document is typed as Document, div is HTMLDivElement, and parent is HTMLElement.

Source: developer.mozilla.org