类型错误：的document.getElementById（...）为空

Question

我想建立使用http://ejohn.org/blog/javascript-micro-templating

我的HTML模板生成器有这个脚本标签

<script type="text/html" id="item_tmpl"> 
    <div> 
    <div class="grid_1 alpha right"> 
    </div> 
    <div class="grid_6 omega contents"> 
    <p><b><a href="/<%=AdTitle%>"><%=AdTitle%></a>:</b> <%=AdTitle%></p> 
    </div> 
</div> 
</script> 

<script src="${URLUtils.staticURL('/js/shoptheAd.js')}"type="text/javascript"></script> 
The Script contains the following code 
     (function(app){ 
     if (app) { 
     var cache = {}; 
     this.tmpl = function tmpl(str, data){ 
     // Figure out if we're getting a template, or if we need to 
     // load the template - and be sure to cache the result. 
     var fn = !/\W/.test(str) ? 
      cache[str] = cache[str] || 
      tmpl(document.getElementById(str).innerHTML) : 
      // Generate a reusable function that will serve as a template 
      // generator (and which will be cached). 
      new Function("obj", 
      "var p=[],print=function(){p.push.apply(p,arguments);};" + 

      // Introduce the data as local variables using with(){} 
      "with(obj){p.push('" + 

      // Convert the template into pure JavaScript 
      str 
       .replace(/[\r\t\n]/g, " ") 
       .split("<%").join("\t") 
       .replace(/((^|%>)[^\t]*)'/g, "$1\r") 
       .replace(/\t=(.*?)%>/g, "',$1,'") 
       .split("\t").join("');") 
       .split("%>").join("p.push('") 
       .split("\r").join("\\'") 
      + "');}return p.join('');"); 

     // Provide some basic currying to the user 
     return data ? fn(data) : fn; 
     }; 
     var sitecoresuggestions = { 
     "suggestions": [ 
      { 
       "AdTitle": "CheckAd", 
       "AdDescription": "", 
       "AdImageUrl": "http://demo-kiehls.loreal.photoninfotech.com/~/media/Advertisement Images/emma-watson-3.ashx", 
       "Count": 2, 
       "Hit": 0 
      }, 
      { 
       "AdTitle": "CheckAd", 
       "AdDescription": "", 
       "AdImageUrl": "http://demo-kiehls.loreal.photoninfotech.com/~/media/Advertisement Images/kate2.ashx", 
       "Count": 2, 
       "Hit": 0 
      } 
     ] 
    } ; 
     var show_user = tmpl("item_tmpl"), html = ""; 
    for (var i = 0; i < sitecoresuggestions.suggestions.length; i++) { 
     html += show_user(sitecoresuggestions.suggestions[i]); 
    } 
     console.log(html); 
     } else { 
      // namespace has not been defined yet 
      alert("app namespace is not loaded yet!"); 
     } 
    })(app); 
     When the show_user = tmpl("item_tmpl") is executed 
     i get the error TypeError: document.getElementById(...) is null 

调试我想通了，由于某些原因

 <script type="text/html" id="item_tmpl"> 
     <div> 
    <div class="grid_1 alpha right"> 
    </div> 
    <div class="grid_6 omega contents"> 
    <p><b><a href="/<%=AdTitle%>"><%=AdTitle%></a>:</b> <%=AdTitle%></p> 
    </div> 
    </div> 
    </script> 

不会被加载到浏览器为什么它，即使它包含在头部标记或任何其他指针的原因里面是没有得到加载任何想法

Quick tip: Embedding scripts in your page that have a unknown content-type (such is the case here - >the browser doesn't know how to execute a text/html script) are simply ignored by the browser - and >by search engines and screenreaders. It's a perfect cloaking device for sneaking templates into >your page. I like to use this technique for quick-and-dirty cases where I just need a little >template or two on the page and want something light and fast.

所以页面实际上并不渲染HTML，我会假设你只需要在页面引用它，因此你可以提取和应用：错误

Answer 1

每后的到其他物体或物品。而作为博客指出你会使用它想：

var results = document.getElementById("results"); 
results.innerHTML = tmpl("item_tmpl", dataObject);