上段と下段の違いを code で検証する
<body>
<ul id="list"></ul>
- - - - - - - - - - -
<ul id="ul"></ul>
- - - 参考サイトDocumentFragment M D N- - -
<script>
var list = document.querySelector('#list') //listの場合
var fruits = [
'Apple',
'Orange',
'Banana',
'Melon',
'西瓜',
'琵琶',
'無花果'
]
var fragment = new DocumentFragment()
fruits.forEach(function (fruit) {
var li = document.createElement('li')
li.innerHTML = fruit
fragment.appendChild(li)
})
list.appendChild(fragment)
</script>
- - - - - - - - - - -
- - -参考サイト Document.createDocumentFragment() M D N- - -
<script>
var element = document.getElementById('ul'); // ulが存在すると仮定した場合 assuming ul exists
var fragment = document.createDocumentFragment(); //多くの要素を挿入する。
var browsers = ['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer', 'Microsoft Edger', 'プラウザ',];
browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment);
</script>
</body>