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

你需要为“elements”nodeList中的每个元素做一个appendChild（假设有多个）。

另请注意：list元素应具有父ol或ul元素。

Answer 2

我终于想出了如何正确解析和附加XUL标记字符串。我能够使用新parseFromString中的DOMParser()方法。我必须确保元素的标记指定了命名空间（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>

从一串标记中将XUL元素附加到DOM中

2 个答案: