在实现ECMAScript 5 insertAjacentHTML(）函数时，用户定义的函数不是函数错误
user defined function is not a function error when implementing ECMAScript 5 insertAjacentHTML() function
我正在做的是使用纯javascript生成后期导航。但它显示beforeCloseTag不是一个函数
在下面的工具函数中，它应该是一个函数，因为我在CloseTag作为函数之前做了代码。在这个片段中，它可以生成ul列表，但如果你通过web检查器查看，你仍然可以找到：
**Uncaught TypeError: greatApp.tools.insertHTMLString.beforeClosingTag is not a function**
除此之外，在我的本地环境中，同样的代码，但它甚至不能显示ul列表，我不知道为什么。感谢
//global tools function(insertHTMLString.beforeClosingTag)
var greatApp = greatApp || {};
(function(){
greatApp.tools = {
insertHTMLString: function(){
/*****
if elements have a native insertAdjacentHTML : use it in four html insertion functions with more sensible names
*****/
if(document.createElement('div').insertAdjacentHTML){
return {
beforeOpeningTag: function(element,htmlString){
element.insertAdjacentHTML('beforebegin',htmlString);
},
afterOpeningTag: function(element,htmlString){
element.insertAdjacentHTML('afterbegin',htmlString);
},
beforeClosingTag: function(element,htmlString){
element.insertAdjacentHTML('beforeend',htmlString);
},
afterClosingTag: function(element,htmlString){
element.insertAdjacentHTML('afterend',htmlString);
}
}
}//end if
/********
otherwise, we have no native insertAdjacentHTML : implement the same four insertion functions and then use them to define insertAdjacentHTML
******/
function fragment(htmlString){
var ele = document.createElement('div');
var frag = document.createDocumentFragment();
ele.innerHTML = htmlString;
//move all nodes from ele to frag
while(ele.firstChild)
frag.appendChild(ele.firstChild);
return frag;
}
var insertHTMLString = {
beforeOpeningTag: function(element,htmlString){
element.parentNode.insertBefore(fragment(htmlString),element);
},
afterOpeningTag: function(element,htmlString){
element.parentNode.insertBefore(fragment(htmlString),element.firstChild);
},
beforeClosingTag: function(element,htmlString){
element.parentNode.appendChild(fragment(htmlString));
},
afterClosingTag: function(element,htmlString){
element.parentNode.insertBefore(fragment(htmlString),element.nextSibling);
}
};
/**
now implement insertAdjacentHMTL based on the functions above
**/
Element.prototype.insertAdjacentHMTL = function(pos, htmlString){
switch(pos.toLowerCase()){
case "beforebegin": return insertHTMLString.beforeOpeningTag(this, htmlString);
case "afterbegin": return insertHTMLString.afterOpeningTag(this, htmlString);
case "beforeend": return insertHTMLString.beforeClosingTag(this, htmlString);
case "afterend": return insertHTMLString.beforeClosingTag(this, htmlString);
}
};
return insertHTMLString;
},
}}());
//post js
(function(){
var titles = document.querySelectorAll('.sideNav h3');
var sideList = document.getElementsByClassName('sideList')[0];
var ul = document.querySelectorAll('.sideList ul')[0];
for(var i = 0; i< titles.length; i++){
var aWithhref = '<a href = ' + '#' + titles[i].getAttribute('id') + '>';
var titleText = titles[i].textContent || titles[i].innerText;
var li = '<li>'+ aWithhref + titleText +'</a>'+ '</li>';
(Element.prototype.insertAjacentHTML)? ul.insertAdjacentHTML('beforeend',li) : greatApp.tools.insertHTMLString.beforeClosingTag(ul, li);
}
}());<div class="row expanded docHomeDetails sideNav">
<h3 id="homeCollectionUpdate"># Update</h3>
<h3 id="homee"># home</h3>
<h3 id="Update"># forum</h3>
</div>
<div class="small-12 medium-4 columns sideList" data-sticky-container >
<div class="sticky" data-sticky data-top-anchor="homeCollectionUpdate" data-btm-anchor="homeCollectionMentorWrapper:bottom">
<ul>
<p>页面导航</p>
</ul>
</div>
</div>
</div>谢谢你的帮助。
我的代码如下：
//html
<div class="small-12 medium-4 columns sideList" data-sticky-container >
<div class="sticky" data-sticky data-top-anchor="homeCollectionUpdate" data-btm-anchor="homeCollectionMentorWrapper:bottom">
<ul>
<p>页面导航</p>
</ul>
</div>
</div>
//javascript
(function(){
var titles = document.querySelectorAll('.sideNav h3');
var sideList = document.getElementsByClassName('sideList')[0];
var ul = document.querySelectorAll('.sideList ul')[0];
for(var i = 0; i< titles.length; i++){
var aWithhref = '<a href = ' + '#' + titles[i].getAttribute('id') + '>';
var titleText = titles[i].textContent || titles[i].innerText;
var li = '<li>'+ aWithhref + titleText +'</a>'+ '</li>';
(Element.prototype.insertAjacentHTML)? ul.insertAdjacentHTML('beforeend',li) : greatApp.tools.insertHTMLString.beforeClosingTag(ul, li);
}
}());
//全局工具函数（insertHTMLString.foreCloseTag）
var greatApp = greatApp || {};
(function(){
greatApp.tools = {
insertHTMLString: function(){
/*****
if elements have a native insertAdjacentHTML : use it in four html insertion functions with more sensible names
*****/
if(document.createElement('div').insertAdjacentHTML){
return {
beforeOpeningTag: function(element,htmlString){
element.insertAdjacentHTML('beforebegin',htmlString);
},
afterOpeningTag: function(element,htmlString){
element.insertAdjacentHTML('afterbegin',htmlString);
},
beforeClosingTag: function(element,htmlString){
element.insertAdjacentHTML('beforeend',htmlString);
},
afterClosingTag: function(element,htmlString){
element.insertAdjacentHTML('afterend',htmlString);
}
}
}//end if
/********
otherwise, we have no native insertAdjacentHTML : implement the same four insertion functions and then use them to define insertAdjacentHTML
******/
function fragment(htmlString){
var ele = document.createElement('div');
var frag = document.createDocumentFragment();
ele.innerHTML = htmlString;
//move all nodes from ele to frag
while(ele.firstChild)
frag.appendChild(ele.firstChild);
return frag;
}
var insertHTMLString = {
beforeOpeningTag: function(element,htmlString){
element.parentNode.insertBefore(fragment(htmlString),element);
},
afterOpeningTag: function(element,htmlString){
element.parentNode.insertBefore(fragment(htmlString),element.firstChild);
},
beforeClosingTag: function(element,htmlString){
element.parentNode.appendChild(fragment(htmlString));
},
afterClosingTag: function(element,htmlString){
element.parentNode.insertBefore(fragment(htmlString),element.nextSibling);
}
};
/**
now implement insertAdjacentHMTL based on the functions above
**/
Element.prototype.insertAdjacentHMTL = function(pos, htmlString){
switch(pos.toLowerCase()){
case "beforebegin": return insertHTMLString.beforeOpeningTag(this, htmlString);
case "afterbegin": return insertHTMLString.afterOpeningTag(this, htmlString);
case "beforeend": return insertHTMLString.beforeClosingTag(this, htmlString);
case "afterend": return insertHTMLString.beforeClosingTag(this, htmlString);
}
};
return insertHTMLString;
},
}}());
insertHTMLString是一个函数而不是对象。您可以创建一个对象，如：
var innerHTMLObj = new greatApp.tools.insertHTMLString();
(Element.prototype.insertAjacentHTML) ?
ul.insertAdjacentHTML('beforeend', li):
innerHTMLObj.beforeClosingTag(ul, li);
的可以用IIFE替换。
对象实现
//global tools function(insertHTMLString.beforeClosingTag)
var greatApp = greatApp || {};
(function() {
greatApp.tools = {
insertHTMLString: function() {
/*****
if elements have a native insertAdjacentHTML : use it in four html insertion functions with more sensible names
*****/
if (document.createElement('div').insertAdjacentHTML) {
return {
beforeOpeningTag: function(element, htmlString) {
element.insertAdjacentHTML('beforebegin', htmlString);
},
afterOpeningTag: function(element, htmlString) {
element.insertAdjacentHTML('afterbegin', htmlString);
},
beforeClosingTag: function(element, htmlString) {
element.insertAdjacentHTML('beforeend', htmlString);
},
afterClosingTag: function(element, htmlString) {
element.insertAdjacentHTML('afterend', htmlString);
}
}
} //end if
/********
otherwise, we have no native insertAdjacentHTML : implement the same four insertion functions and then use them to define insertAdjacentHTML
******/
function fragment(htmlString) {
var ele = document.createElement('div');
var frag = document.createDocumentFragment();
ele.innerHTML = htmlString;
//move all nodes from ele to frag
while (ele.firstChild)
frag.appendChild(ele.firstChild);
return frag;
}
var insertHTMLString = {
beforeOpeningTag: function(element, htmlString) {
element.parentNode.insertBefore(fragment(htmlString), element);
},
afterOpeningTag: function(element, htmlString) {
element.parentNode.insertBefore(fragment(htmlString), element.firstChild);
},
beforeClosingTag: function(element, htmlString) {
element.parentNode.appendChild(fragment(htmlString));
},
afterClosingTag: function(element, htmlString) {
element.parentNode.insertBefore(fragment(htmlString), element.nextSibling);
}
};
/**
now implement insertAdjacentHMTL based on the functions above
**/
Element.prototype.insertAdjacentHMTL = function(pos, htmlString) {
switch (pos.toLowerCase()) {
case "beforebegin":
return insertHTMLString.beforeOpeningTag(this, htmlString);
case "afterbegin":
return insertHTMLString.afterOpeningTag(this, htmlString);
case "beforeend":
return insertHTMLString.beforeClosingTag(this, htmlString);
case "afterend":
return insertHTMLString.beforeClosingTag(this, htmlString);
}
};
return insertHTMLString;
},
}
}());
//post js
(function() {
var titles = document.querySelectorAll('.sideNav h3');
var sideList = document.getElementsByClassName('sideList')[0];
var ul = document.querySelectorAll('.sideList ul')[0];
for (var i = 0; i < titles.length; i++) {
var aWithhref = '<a href = ' + '#' + titles[i].getAttribute('id') + '>';
var titleText = titles[i].textContent || titles[i].innerText;
var li = '<li>' + aWithhref + titleText + '</a>' + '</li>';
var innerHTMLObj = new greatApp.tools.insertHTMLString();
(Element.prototype.insertAjacentHTML) ? ul.insertAdjacentHTML('beforeend', li): innerHTMLObj.beforeClosingTag(ul, li);
}
}());<div class="row expanded docHomeDetails sideNav">
<h3 id="homeCollectionUpdate"># Update</h3>
<h3 id="homee"># home</h3>
<h3 id="Update"># forum</h3>
<div class="small-12 medium-4 columns sideList" data-sticky-container>
<div class="sticky" data-sticky data-top-anchor="homeCollectionUpdate" data-btm-anchor="homeCollectionMentorWrapper:bottom">
<ul>
<p>页面导航</p>
</ul>
</div>
</div>
</div>IIFE实施
//global tools function(insertHTMLString.beforeClosingTag)
var greatApp = greatApp || {};
(function() {
greatApp.tools = {
insertHTMLString: (function() {
/*****
if elements have a native insertAdjacentHTML : use it in four html insertion functions with more sensible names
*****/
if (document.createElement('div').insertAdjacentHTML) {
return {
beforeOpeningTag: function(element, htmlString) {
element.insertAdjacentHTML('beforebegin', htmlString);
},
afterOpeningTag: function(element, htmlString) {
element.insertAdjacentHTML('afterbegin', htmlString);
},
beforeClosingTag: function(element, htmlString) {
element.insertAdjacentHTML('beforeend', htmlString);
},
afterClosingTag: function(element, htmlString) {
element.insertAdjacentHTML('afterend', htmlString);
}
}
} //end if
/********
otherwise, we have no native insertAdjacentHTML : implement the same four insertion functions and then use them to define insertAdjacentHTML
******/
function fragment(htmlString) {
var ele = document.createElement('div');
var frag = document.createDocumentFragment();
ele.innerHTML = htmlString;
//move all nodes from ele to frag
while (ele.firstChild)
frag.appendChild(ele.firstChild);
return frag;
}
var insertHTMLString = {
beforeOpeningTag: function(element, htmlString) {
element.parentNode.insertBefore(fragment(htmlString), element);
},
afterOpeningTag: function(element, htmlString) {
element.parentNode.insertBefore(fragment(htmlString), element.firstChild);
},
beforeClosingTag: function(element, htmlString) {
element.parentNode.appendChild(fragment(htmlString));
},
afterClosingTag: function(element, htmlString) {
element.parentNode.insertBefore(fragment(htmlString), element.nextSibling);
}
};
/**
now implement insertAdjacentHMTL based on the functions above
**/
Element.prototype.insertAdjacentHMTL = function(pos, htmlString) {
switch (pos.toLowerCase()) {
case "beforebegin":
return insertHTMLString.beforeOpeningTag(this, htmlString);
case "afterbegin":
return insertHTMLString.afterOpeningTag(this, htmlString);
case "beforeend":
return insertHTMLString.beforeClosingTag(this, htmlString);
case "afterend":
return insertHTMLString.beforeClosingTag(this, htmlString);
}
};
return insertHTMLString;
})(),
}
}());
//post js
(function() {
var titles = document.querySelectorAll('.sideNav h3');
var sideList = document.getElementsByClassName('sideList')[0];
var ul = document.querySelectorAll('.sideList ul')[0];
for (var i = 0; i < titles.length; i++) {
var aWithhref = '<a href = ' + '#' + titles[i].getAttribute('id') + '>';
var titleText = titles[i].textContent || titles[i].innerText;
var li = '<li>' + aWithhref + titleText + '</a>' + '</li>';
(Element.prototype.insertAjacentHTML) ? ul.insertAdjacentHTML('beforeend', li): greatApp.tools.insertHTMLString.beforeClosingTag(ul, li);
}
}());<div class="row expanded docHomeDetails sideNav">
<h3 id="homeCollectionUpdate"># Update</h3>
<h3 id="homee"># home</h3>
<h3 id="Update"># forum</h3>
<div class="small-12 medium-4 columns sideList" data-sticky-container>
<div class="sticky" data-sticky data-top-anchor="homeCollectionUpdate" data-btm-anchor="homeCollectionMentorWrapper:bottom">
<ul>
<p>页面导航</p>
</ul>
</div>
</div>
</div>相关文章：
- 用嵌套函数和默认函数定义函数
- 使用Extjs进行函数定义
- JS中奇怪的函数定义语法
- 重写javascript函数定义
- 使用角度图时，我可以用函数定义数据点颜色吗
- modal.js中的匿名函数定义
- 为从AJAX调用中utlizes DATA参数的函数定义回调
- Emacs:在 etag 中查找函数定义
- Javascript:对象函数定义
- 为什么要在函数定义之外引用静态变量(函数属性）
- Ember 对象函数定义中的计算属性.js
- javascript/jQuery中函数定义的区别
- CoffeeScript 承诺与函数定义链接
- 如何在使用 eval(） 评估 JavaScript 时将回调函数定义作为参数传递
- Javascript - 为什么下面的函数定义错误
- 使用函数声明时的自定义函数(也称为惰性函数定义）
- JavaScript 函数定义不正确
- jQuery off on 时是用匿名函数定义的
- 停止 IntelliJ 11 在启用 JSLint 时向每个嵌套函数定义添加“use strict”
- 为什么不是't我为这个函数定义的javascript函数
