Created
April 28, 2020 13:11
-
-
Save oieioi/ee6efa93fbe3ed3010e8f9000a1d409b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <title>Test</title> | |
| <script src="https://code.jquery.com/jquery-3.5.0.js"></script> | |
| </head> | |
| <body> | |
| <select id="list"> | |
| <option class="item" value="1">1</option> | |
| <option class="item" value="2">2</option> | |
| <option class="item" value="3">3</option> | |
| </select> | |
| <button id="btn-1">empty and append again</button> | |
| <button id="btn-2">empty and append again with jQuery</button> | |
| <button id="btn-3">empty and append again and reflow</button> | |
| <button id="btn-4">empty and append again and reflow with jQuery</button> | |
| <button id="btn-5">empty and append new elements</button> | |
| <button id="btn-6">empty and append again with diffrent methods</button> | |
| <script> | |
| { | |
| const list = document.querySelector('#list'); | |
| const items = document.querySelectorAll('.item'); | |
| const append = function(parent, child){ | |
| var fragment = document.createDocumentFragment(); | |
| fragment.appendChild(child); | |
| parent.appendChild(fragment); | |
| } | |
| const newItems = [...Array(3)].map( (e, i) => { | |
| const opt = document.createElement('option') | |
| opt.value = i + 1; | |
| opt.textContent = i + 1; | |
| opt.classList.add('item') | |
| return opt | |
| }) | |
| // jQuery | |
| const $list = $('#list'); | |
| const $items = $('.item'); | |
| document.querySelector('#btn-1').addEventListener('click', (e) => { | |
| list.innerHTML = ''; | |
| items.forEach((item)=> { append(list, item)}) | |
| }); | |
| document.querySelector('#btn-2').addEventListener('click', (e) => { | |
| $list.empty(); | |
| $items.each((i, el) => $list.append(el)); | |
| }); | |
| document.querySelector('#btn-3').addEventListener('click', (e) => { | |
| list.innerHTML = ''; | |
| items.forEach((item)=> { append(list, item); item.offsetHeight}) | |
| }); | |
| document.querySelector('#btn-4').addEventListener('click', (e) => { | |
| $list.empty(); | |
| $items.each((i, el) => $list.append($(el).clone())); | |
| }); | |
| document.querySelector('#btn-5').addEventListener('click', (e) => { | |
| list.innerHTML = ''; | |
| newItems.forEach((item)=> { append(list, item)}) | |
| }) | |
| document.querySelector('#btn-6').addEventListener('click', (e) => { | |
| list.innerHTML = ''; | |
| setTimeout(() => { | |
| items.forEach((item)=> { append(list, item)}) | |
| }, 100) | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://enormous-separated-buckaroo.glitch.me/
https://qiita.com/oieioi/items/3a5959a76964a0c65246