Menu
What are the best practices for doing DOM insertion?
685
Category: DOM Insertion, InsideThese methods allow us to insert new content inside an existing element.
The innerHTML property returns: The text content of the element, including all spacing and inner HTML tags. The innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements.
As a web developer, you frequently need to manipulate the DOM , the object model that is used by browsers to specify the logical structure of web pages, and based on this structure to render HTML elements on the screen. HTML defines the default DOM structure.
Setting innerHTML is often faster than inserting seperate nodes.
Another possibility would be to create a DocumentFragment, which allows to insert the nodes all at once. Another advantage of using DocumentFragments is that they can easily be cloned, which can replace a lot of use cases for innerHTML and is potentially faster as no parsing is involved.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
