DocumentFragment.innerHTML 的奇怪行为是由于它不是 DOM 中的常规属性。它是一个只读属性,不会对文档结构进行实际的更改,也不会触发重新渲染。
如果你想在 DocumentFragment 中动态添加或删除元素,可以使用其他 DOM 方法来实现。下面是一些解决方法:
var fragment = document.createDocumentFragment();
var newElement = document.createElement('div');
newElement.innerHTML = 'Hello World';
fragment.appendChild(newElement);
var fragment = document.createDocumentFragment();
var newFragment = fragment.cloneNode();
var newElement = document.createElement('div');
newElement.innerHTML = 'Hello World';
newFragment.appendChild(newElement);
var fragment = document.createDocumentFragment();
var elementToRemove = fragment.querySelector('.element-to-remove');
elementToRemove.parentNode.removeChild(elementToRemove);
var fragment = document.createDocumentFragment();
var existingElement = fragment.querySelector('.existing-element');
var newElement = document.createElement('div');
newElement.innerHTML = 'Hello World';
existingElement.parentNode.replaceChild(newElement, existingElement);
通过使用这些方法,你可以绕过 DocumentFragment.innerHTML 的限制,并实现对 DocumentFragment 的动态操作。