在DocumentFragment中：無法在'Element'上執行'insertAdjacentHTML'：該元素沒有父項

我正在使用DocumentFragment，並試圖向其中插入HTML。我們知道DocumentFragment沒有innerHTML setter，因此我試圖在DocumentFragment中插入一個臨時節點，並在使用insertAdjacentHTML後插入HTML。然後，我會刪除臨時元素，並留下與我想要的DOM片段。在DocumentFragment中：無法在'Element'上執行'insertAdjacentHTML'：該元素沒有父項

例子：（錯誤是故意的）

var fragment = document.createDocumentFragment(); 
 
var temporaryElement = fragment.appendChild(document.createElement('div')); 
 

 
// Before we move on.. I can see that the `temporaryElement` does have a parent 
 
console.log(temporaryElement.parentNode.nodeType); 
 

 
// The following throws an error... 
 
temporaryElement.insertAdjacentHTML('afterend', '<div>Some crazy custom HTML..</div>'); 
 

 
fragment.removeChild(temporaryElement);

我可以清楚地看到，對於臨時元素的parentNode，所以我爲什麼會得到這個錯誤？

來源

2017-02-27 KevBot

父節點的類型的'Node.DOCUMENT_FRAGMENT_NODE'（控制檯顯示11，其匹配常數），這顯然是不運行'insertAdjacentHTML'有效的父。另請參閱[MDN的瀏覽器兼容性表]（https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment#Browser_compatibility），它顯示ParentNode方法在所有瀏覽器中都不可用... –

您可以附加另一個片段，這樣以後您不必刪除任何東西。請參閱http://stackoverflow.com/questions/9284117/inserting-arbitrary-html-into-a-documentfragment/25214113#25214113爲方便助手 – dandavis

您可以：

創建<template>元素，
通過其innerHTML屬性添加字符串內容，
獲取其content財產的DocumentFragment。

//Use a template 
 
var template = document.createElement('template') 
 
template.innerHTML = '<td>Hello<td>World' 
 

 
//Get the document fragment 
 
var fragment = template.content 
 
Row.appendChild(fragment)

<table> 
 
    <tr id=Row></tr> 
 
</table>

來源

2017-03-01 09:20:11 Supersharp

我明白，你解決了添加需要某些父代碼（'td'）的元素的關注。我確實走了這條路，但是因爲IE11不支持模板標籤，所以我不得不做一些倒退。謝謝您的幫助！如果你有興趣，這是[我結束了]（https://github.com/kevinokerlund/html-fragment/blob/master/src/html-fragment.js） – KevBot

所以我敢肯定你想要一個解析的div，對吧？所以要做到這一點，你會這樣做。

var fragment = document.createElement("div"); 
 
fragment.innerHTML = "Some crazy custom HTML.."; 
 

 
//This will output exactly what your code should do 
 
console.log(fragment);

來源

2017-02-27 19:29:29

好主意，但如果HTML爲'Data '。 div會丟棄標籤，只留下文本節點：''Data''。這就是爲什麼它需要直接放置在片段中的原因。 – KevBot

@KevBot然後，我會嘗試document.createElement td的然後appendChild他們到片段 –

在DocumentFragment中：無法在'Element'上執行'insertAdjacentHTML'：該元素沒有父項

回答

相關問題