從一串標記中將XUL元素附加到DOM中

我正在使用JavaScript和XUL編寫Firefox擴展。我的部分代碼需要能夠獲取一些XUL標記並將其動態添加到現有的容器元素中。所以基本上我需要appendChild（）而不是一個文本字符串，而不是一個Node對象。爲此，我嘗試了this問題中列出的方法。不幸的是，這似乎並不奏效。看起來，div.childNodes返回一個空的nodeList，我甚至無法附加到容器。錯誤是從一串標記中將XUL元素附加到DOM中

Error: Could not convert JavaScript argument arg 0 [nsIDOMXULElement.appendChild]

我不太確定我做錯了什麼。有沒有辦法讓這個工作，或一些替代方法來動態設置容器的標記？

注意：容器元素的類型爲richlistbox。

function updateContainerData(containerName){ 
     try{ 
     var resultsArray = DB.queryAsync("SELECT nodeData FROM waffleapps_privateurl"); 

     container = document.getElementById(containerName); 

     for (var i = 0; i < resultsArray.length; i++) { 

      /* 
      // This works - appending an actual Node (duplicate from a template) 
      template = document.getElementById("list-item-template"); 
      dupNode = template.cloneNode(true); 
      dupNode.setAttribute("hidden", false); 
      container.appendChild(dupNode); 
      */ 

      // This doesn't work 
      div = document.createElement("div"); 
      //var s = '<li>text</li>'; 
var s = "<richlistitem id ='list-item-template'><hbox><checkbox label='' checked='true'/> <description>DESCRIPTION</description><textbox>test</textbox><textbox></textbox></hbox></richlistitem>"; 

      div.innerHTML = s; 
      var elements = div.childNodes; 

      container.appendChild(elements); // error 

     } 
     } 
     catch(err){ 
      alert("Error: " + err.message); 
     } 
    }

我已經通過使用下面的代碼得到了一點。現在我可以在容器中插入HTML元素，但看起來XUL元素沒有正確解析 - 複選框和文本框沒有出現。我不知道如何改變這個，所以它正確地解析HTML和XUL標記。

var s = "<richlistitem id ='list-item-template'><hbox><checkbox label='' checked='true'/> <description>DESCRIPTION</description><textbox>test</textbox><textbox></textbox></hbox></richlistitem>"; 
    var dp = new DOMParser(); 
    container.appendChild(dp.parseFromString(s, "text/xml").documentElement);

來源

2012-05-14 Bryan

我終於想出瞭如何正確解析和追加一個XUL標記字符串。我能夠使用新的DOMParser()中的parseFromString方法。我必須確保元素的標記指定了名稱空間（xmlns），以便解析器知道它是XUL標記。

下面的代碼顯示了一個完整的示例。

test.js：

test = function(){ 
    alert("testing"); 

    container = document.getElementById("testing"); 
    var dp = new DOMParser(); 

    // must specify namespace 
    var s = "<textbox xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul' value='test' size='20'></textbox>"; 

    element = dp.parseFromString(s, "text/xml").documentElement; 

    container.appendChild(element); 

    document.getElementById("testing"); 
}

test.xul：

<?xml version="1.0"?> 

<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?> 
<?xml-stylesheet type="text/css" 
    href="chrome://testextensionname/skin/test.css" ?> 

<!DOCTYPE window SYSTEM 
    "chrome://testextensionname/locale/test.dtd"> 

<window xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
     id="testWindow" 
     orient="vertical" title="TEST" statictitle="TEST" 
     width="50" height="50;" screenX="10" screenY="10" 
     > 
<script type="application/x-javascript" src="chrome://testextensionname/content/test.js" /> 

<hbox id="testing"> 
<button label="Go" oncommand="test()"/> 
<textbox value='test' size='20'></textbox> 
</hbox> 

</window>

來源

2012-05-14 04:55:04 Bryan

您需要爲「elements」nodeList中的每個元素（假設有多個元素）執行appendChild。

另請注意：列表元素應該有父ol或ul元素。

來源

2012-05-14 01:46:33 Yansky

不幸的是節點列表是空的，不管是什麼原因的元素。 – Bryan

從一串標記中將XUL元素附加到DOM中

回答

相關問題