Google Caja appendChild 不更新 Firefox 中的 form.elements答案

【问题标题】：Google Caja appendChild not updating form.elements in FirefoxGoogle Caja appendChild 不更新 Firefox 中的 form.elements
【发布时间】：2013-03-14 02:00:11
【问题描述】：

我正在使用 Google Apps Script Web App 和 HtmlService 来提供内容，并且我正在尝试使用 appendChild 将输入元素动态添加到表单中。它适用于 Chrome 24 和 IE 10，但 Firefox 19.0.2 不会更新表单的元素列表。

因此，它在网页上正确显示，但在 Firefox 中，使用 appendChild 添加到表单的任何输入元素都不属于 form.elements 集合。值得注意的是，此问题仅在使用 Caja 清理 HTML 时出现，如果我在 jsfiddle 中使用相同的代码，它可以正常工作。

问题可见here，也就是如下代码：

<html>
      <head>
        <title>Test</title>
        <script type="text/javascript">
          function print(form)
          {
            var str = "";
            for(var v = 0; v < form.length; v++)
            {
              str += "<br>" + form[v].nodeName + "." + form[v].id + ": ";
              if(form[v].elements != undefined)
                for(var w = 0; w < form[v].elements.length; w++)
                {   
                  str += form[v].elements[w].name + ", ";
                }
            }
            return str;
          }

          function submitForm()
          {        
            document.getElementById("nameLookupHelp").innerHTML = (print(document.forms)) + "<br>Total Elements:" + document.forms[0].elements.length;
            return;
          }

          function onLoad()
          {
            var name = document.getElementById("nameForm");
            var t = document.createElement("input");
            t.name = "TestInput";
            //t.id = "TestInput";
            name.appendChild(t);
          }
        </script>
      </head>
      <body onload="onLoad()">
        <form name="nameForm" id="nameForm">
          <input name="nameLookup" id="nameLookup">
          <input type="button" id="bntNameForm" onclick="submitForm(this)" value="Lookup">
          <div class="" id="nameLookupHelp">Please enter your name.</div>
        </form>
      </body>
    </html>

根据我在该主题上的发现，Firefox 不喜欢无效的 HTML；但是，据我所知，HTML 输出是完全有效的。此外，由于它适用于 jsfiddle，我认为问题出在 Caja 与我的 HTML 和 Firefox 交互的方式上。

另外，最后一件事，如果我在 Firefox 中检查表单元素并双击标记面板中的表单标签，然后单击关闭（取消编辑），Firefox 然后会检测到所有元素并且一切正常。 Firefox 显示为 HTML 的内容并没有改变。

在此先感谢您的帮助。

【问题讨论】：

标签： javascript firefox google-apps-script appendchild google-caja

【解决方案1】：

恭喜，您发现了一个错误；表单的.elements 在第一次访问后永远不会更新。我有fixed it in Caja r5321。

【讨论】：