> For the complete documentation index, see [llms.txt](https://huang-jason.gitbook.io/js-syntax/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huang-jason.gitbook.io/js-syntax/inefficient_dom_manipulation.md).

# inefficient DOM manipulation

Adding multiple DOM elements one by one is inefficient.

One effective alternative is to use **document fragments**.

```javascript
var div = document.getElementsByTagName("my_div");

var fragment = document.createDocumentFragment();
for (var e = 0; e < elems.length; e++) {  // elems previously set to list of elements
    fragment.appendChild(elems[e]);
}

div.appendChild(fragment.cloneNode(true));
```

Creating **attached** DOM elements is expensive.

You should create and modify them **while detached and then attaching** them.