Question

我首先尝试使用innerHTML 创建元素的简单但不赞成的方式：

// "Alarms" is a div that will contain the new divs
document.getElementById("Alarms").innerHTML += "<div onclick=\"watevr\">";

但Visual Studio告诉我，我不允许这样插入JavaScript，然后我尝试了正确/其他方式：

var alarms = document.getElementById("Alarms");
var div = document.createElement("div");
div.innerHTML = "I'm the new div!";
div.onclick = "watevr";
alarms.appendChild(div);

现在每当我运行我的代码时，我都会收到此错误：

0x800a138f - JavaScript运行时错误：无法设置未定义或空引用的属性'innerHTML'

，代码在alarms.appendChild(div);

处中断

我尝试div.addEventListener("click", function(){watevr}, false);代替onclick无济于事。

有趣的是，删除div.onclick = "watevr";可以完全解决问题。

我在这里做错了什么？

Answer 1

首先尝试将所有代码放在一个单独的文件中，然后创建一个这样的自执行函数：

(function(){

   var MyApp {

       init : function(){

            this.renderMyDiv();     

       },

       renderMyDiv: function(){

          var alarms = document.getElementById("Alarms");
          var element = document.createElement('div');
          element.className = 'superDiv';
          element.innerHTML = 'Im the div';
          alarms.appendChild(element);
          this.addDivEvent('superDiv');

       }

       addDivEvent: function(className){

          var element = document.getElementsByClassName(className);
          for(var i = 0, j=element.length; i<j; i++){
                  element[i].addEventListener("click", function(){
                       //TO-DO
                  }
          }

       }

   }

   MyApp.init();

})();

这是旧方法，但你也可以完成这个víajquery。

Answer 2

问题1 - 您无论如何都不想通过属性附加侦听器，所以不要打扰。

问题2 - 您似乎有一个错误导致getElementById返回null或undefined。从你的文本看起来你说createElement返回null，但这不可能，所以我假设你只是粘贴了错误的代码和/或错误。

问题3 - 您在第二个块中使用innerHTML来添加非HTML文本。

问题4 - 您正在为onclick属性分配一个字符串（它应该是一个函数）。

使用createElement，appendChild以及onclick或addEventListener是正确的方法。除非您确实需要插入HTML，否则不要添加到innerHTML。由于字符串不包含任何动态，我不明白为什么它会将元素标记为您信任，但也许它确实...如果是这种情况，您可以： A）使用innerText。 B）直接或使用模板或片段创建更多元素。 C）在分配给innerHTML之前，在字符串上调用toStaticHTML。 4）在MSApp.execUnsafeLocalFunction调用中包含将元素添加到DOM的调用。

但是你需要先修复你的空引用错误。

WinJS不允许我将事件处理程序附加到动态创建的HTML元素

2 个答案: