Почему i за границами циклы for?

Question

Почему debug срабатывает а именно почему https://prnt.sc/rqpad2 ?

    let htmlToFragment = function (html) {
    let template = document.createElement('template');
    let cc;
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    const documentFragment = document.createDocumentFragment();
    cc=template.content.childElementCount;
    for (let i = 0; i < cc; i++) {
        try {
            documentFragment.appendChild(template.content.childNodes[i]);
        } catch{
            debugger;
        }
    }
    return documentFragment;
};
    let thisName = "contact_list_bulkSelect_" ;

let UI = htmlToFragment("<button id='"+thisName+"MY_YAKEXT_GET_B'>Массовый поиск</button><textarea id='"+thisName+"MY_YAKEXT_RES' style='width: 1px; height: 1px'></textarea><button id='"+thisName+"MY_YAKEXT_GET_RES' disabled>Получить результат</button>");
    document.appendChild(UI);

Answer 1

Вобщем проблему можно наглядно выявить кодом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bugtest</title>
</head>
<body>
<script>
    /**
     * @param html {String} HTML representing a single element
     * @return {DocumentFragment}
     */
    let htmlToFragment = function (html) {
        let template = document.createElement('template');
        let cc;
        html = html.trim(); // Never return a text node of whitespace as the result
        template.innerHTML = html;
        const documentFragment = document.createDocumentFragment();
        cc=template.content.childElementCount;
        documentFragment.appendChild(template.content.childNodes[0]);
        documentFragment.appendChild(template.content.childNodes[1]);
        documentFragment.appendChild(template.content.childNodes[2]);
        return documentFragment;
    };
    let thisName = "contact_list_bulkSelect_" ;

    let UI = htmlToFragment("<button id='"+thisName+"MY_YAKEXT_GET_B'>Массовый поиск</button><textarea id='"+thisName+"MY_YAKEXT_RES' style='width: 1px; height: 1px'></textarea><button id='"+thisName+"MY_YAKEXT_GET_RES' disabled>Получить результат</button>");
    document.appendChild(UI);
</script>
</body>
</html>

Если поставить так точки останова и watches: https://prnt.sc/rqqmc2 template.content узлы не копируются а ПЕРЕМЕЩАЮТСЯ в documentFragment (при этом template.content.childElementCount уменьшается конечно же)

Answer 2

вот ваш код, только с небольшим улучшением template.content - это уже documentFragment, поэтому вам не нужно создавать дополнительный фрагмент

const htmlToFragment = function(html) {
  const template = document.createElement('template');
  html = html.trim(); // Never return a text node of whitespace as the result
  template.innerHTML = html;
  return template.content.cloneNode(true);
};
const thisName = "contact_list_bulkSelect_";

const UI = htmlToFragment("<button id='" + thisName + "MY_YAKEXT_GET_B'>Массовый поиск</button><textarea id='" + thisName + "MY_YAKEXT_RES' style='width: 1px; height: 1px'></textarea><button id='" + thisName + "MY_YAKEXT_GET_RES' disabled>Получить результат</button>");
document.body.appendChild(UI);

БЛОГ НА HUSL

Почему i за границами циклы for?

Ответы (2 шт):