Skip to content

Instantly share code, notes, and snippets.

@mojaray2k
Last active December 23, 2015 01:59
Show Gist options
  • Save mojaray2k/6563903 to your computer and use it in GitHub Desktop.
Save mojaray2k/6563903 to your computer and use it in GitHub Desktop.
Grouping inserts into a single operation is faster as it causes the page to be redrawn only once. The same goes for style properties, where it's better to assign a css class than apply multiple styles.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UseElement Grouping to Keep DOM Touches at a Minimum</title>
</head>
<body>
<div id="elem"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="element-grouping.js"></script>
</body>
</html>
var elem = $('#elem'),
arr = [];
for (var i = 0; i < 100; i++) {
arr.push('<li>element ' + i + '</li>');
}
elem.append(arr.join(''));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment