在没有 jQuery 的情况下绑定 HTML 内容 [重复]
Posted
技术标签:
【中文标题】在没有 jQuery 的情况下绑定 HTML 内容 [重复]【英文标题】：Bind HTML content without jQuery [duplicate] 【发布时间】：2014-06-19 15:21:17 【问题描述】：我正在尝试在不使用 jQuery（仅 javascript）的情况下绑定网页的 html 内容。
例如，我们有这个网页。
<body>
da
</body>
然后添加一些东西（通过更改 innerHTML）
<body>
da<b>b</b>
</body>
应该触发回调。那么我会绑定'innerHtml'吗？
【问题讨论】：
这应该会有所帮助：***.com/questions/2844565/… 谢谢，但这似乎不适用于大多数版本的 IE！ 即使使用 jQuery 也无法做到这一点。如果浏览器没有突变事件，就无法模拟它。 ^^^ 这是错误的方法，您真正需要做的就是在使用 innerHTML 更改 DOM 时触发一个函数或类似的东西。 【参考方案1】：你应该使用mutation observers，或者如果目标浏览器不支持DOM mutation events（具体来说，请查看DOMCharacterDataModified和DOMNodeInserted）。
【讨论】：
【参考方案2】：您可以尝试在 IE 中使用 onpropertychange 模拟突变事件（如果它们都不可用，则回退到蛮力方法）。
(function (window)
var last = +new Date();
var delay = 100; // default delay
// Manage event queue
var stack = [];
function callback()
var now = +new Date();
if (now - last > delay)
for (var i = 0; i < stack.length; i++)
stack[i]();
last = now;
// Public interface
var onDomChange = function (fn, newdelay)
if (newdelay) delay = newdelay;
stack.push(fn);
;
// Naive approach for compatibility
function naive()
var last = document.getElementsByTagName('*');
var lastlen = last.length;
var timer = setTimeout(function check()
// get current state of the document
var current = document.getElementsByTagName('*');
var len = current.length;
// if the length is different
// it's fairly obvious
if (len != lastlen)
// just make sure the loop finishes early
last = [];
// go check every element in order
for (var i = 0; i < len; i++)
if (current[i] !== last[i])
callback();
last = current;
lastlen = len;
break;
// over, and over, and over again
setTimeout(check, delay);
, delay);
//
// Check for mutation events support
//
var support = ;
var el = document.documentElement;
var remain = 3;
// callback for the tests
function decide()
if (support.DOMNodeInserted)
window.addEventListener("DOMContentLoaded", function ()
if (support.DOMSubtreeModified) // for FF 3+, Chrome
el.addEventListener('DOMSubtreeModified', callback, false);
else // for FF 2, Safari, Opera 9.6+
el.addEventListener('DOMNodeInserted', callback, false);
el.addEventListener('DOMNodeRemoved', callback, false);
, false);
else if (document.onpropertychange) // for IE 5.5+
document.onpropertychange = callback;
else // fallback
naive();
// checks a particular event
function test(event)
el.addEventListener(event, function fn()
support[event] = true;
el.removeEventListener(event, fn, false);
if (--remain === 0) decide();
, false);
// attach test events
if (window.addEventListener)
test('DOMSubtreeModified');
test('DOMNodeInserted');
test('DOMNodeRemoved');
else
decide();
// do the dummy test
var dummy = document.createElement("div");
el.appendChild(dummy);
el.removeChild(dummy);
// expose
window.onDomChange = onDomChange;
)(window);
像这样使用：
onDomChange(function()
alert("The DOM has changed");
);
这适用于 IE 5.5+、FF 2+、Chrome、Safari 3+ 和 Opera 9.6+
来源：https://***.com/a/3219767/3588664
【讨论】：
以上是关于在没有 jQuery 的情况下绑定 HTML 内容 [重复]的主要内容，如果未能解决你的问题，请参考以下文章