マークアップの文字列からDOMにXUL要素を追加する

Question

JavaScriptとXULを使用してFirefox拡張機能を作成しています。私のコードの一部は、いくつかのXULマークアップを取り、それを既存のコンテナ要素の中に動的に追加する必要があります。ですから、基本的にはappendChild（）を必要としますが、Nodeオブジェクトの代わりにテキスト文字列を使用する必要があります。これを行うには、this質問に記載されている方法を試しました。残念ながら、これは動作していないようです。 div.childNodesは空のnodeListを返します。これはコンテナに追加することもできません。エラーは

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); 

Answer 1

最後に、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> 

Answer 2

「要素」nodeListの各要素に対してappendChildを実行する必要があります（複数ある場合）。

注意：リスト要素には親要素またはul要素が必要です。