components

1-js/05-data-types/05-array-methods/8-sort-objects/solution.md

@@ -1,5 +1,5 @@
 ```js run no-beautify
-function sortByName(arr) {
+function sortByAge(arr) {
   arr.sort((a, b) => a.age > b.age ? 1 : -1);
 }
 
@@ -7,11 +7,12 @@ let john = { name: "John", age: 25 };
 let pete = { name: "Pete", age: 30 };
 let mary = { name: "Mary", age: 28 };
 
-let arr = [ john, pete, mary ];
+let arr = [ pete, john, mary ];
 
-sortByName(arr);
+sortByAge(arr);
 
 // now sorted is: [john, mary, pete]
 alert(arr[0].name); // John
+alert(arr[1].name); // Mary
 alert(arr[2].name); // Pete
 ```

1-js/05-data-types/05-array-methods/8-sort-objects/task.md

@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Sort objects
+# Sort users by age
 
-Write the function `sortByName(users)` that gets an array of objects with the `age` property and sorts them by `age`.
+Write the function `sortByAge(users)` that gets an array of objects with the `age` property and sorts them by `age`.
 
 For instance:
 
@@ -13,11 +13,12 @@ let john = { name: "John", age: 25 };
 let pete = { name: "Pete", age: 30 };
 let mary = { name: "Mary", age: 28 };
 
-let arr = [ john, pete, mary ];
+let arr = [ pete, john, mary ];
 
-sortByName(arr);
+sortByAge(arr);
 
 // now: [john, mary, pete]
 alert(arr[0].name); // John
+alert(arr[1].name); // Mary
 alert(arr[2].name); // Pete
 ```

2-ui/1-document/07-modifying-document/article.md

@@ -335,6 +335,74 @@ An example of copying the message:
 </script>
 ```
 
+
+## DocumentFragment [#document-fragment]
+
+`DocumentFragment` is a special DOM node that serves as a wrapper to pass around groups of nodes.
+
+We can append other nodes to it, but when we insert it somewhere, then it "disappears", leaving its content inserted instead.
+
+For example, `getListContent` below generates a fragment with `<li>` items, that are later inserted into `<ul>`:
+
+```html run
+<ul id="ul"></ul>
+
+<script>
+function getListContent() {
+  let fragment = new DocumentFragment();
+
+  for(let i=1; i<=3; i++) {
+    let li = document.createElement('li');
+    li.append(i);
+    fragment.append(li);
+  }
+
+  return fragment;
+}
+
+*!*
+ul.append(getListContent()); // (*)
+*/!*
+</script>
+```
+
+Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends in", so the resulting structure will be:
+
+```html
+<ul>
+  <li>1</li>
+  <li>2</li>
+  <li>3</li>
+</ul>
+```
+
+`DocumentFragment` is rarely used explicitly. Why append to a special kind of node, if we can return an array of nodes instead? Rewritten example:
+
+```html run
+<ul id="ul"></ul>
+
+<script>
+function getListContent() {
+  let result = [];
+
+  for(let i=1; i<=3; i++) {
+    let li = document.createElement('li');
+    li.append(i);
+    result.push(li);
+  }
+
+  return result;
+}
+
+*!*
+ul.append(...getListContent()); // append + "..." operator = friends!
+*/!*
+</script>
+```
+
+We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later.
+
+
 ## Removal methods
 
 To remove nodes, there are the following methods: