javascript - 将字符串替换为 DOM 元素

Question

我有一个字符串，我想用 DOM 元素替换其中的某些部分:

var mainStr = 'akedf abc dde';

var span = document.createElement('span');
span.id = 'word';
span.innerHTML = '123';
$(span).click(this.touchHandler);

var n = mainStr.replace('abc',span.innerHTML);

var htmlObject = document.createElement('div');
htmlObject.innerHTML = n;


touchHandler:function(e){
    console.log('log something')
},

此代码不起作用，“abc”字符串被替换为“123”，但 touchHandler 不起作用。

代码位于 Backbone.js

有什么办法可以做到这一点吗？

Answer 1

不是这样的。将 Span 插入文档的方式 (var n = ...) 将 Span 视为哑 HTML，并将其留给浏览器来实际创建元素并将其插入 DOM 中；您自己的 span 元素未插入，因此点击处理程序不起作用。

您可以通过这种方式将处理程序附加到实际元素:

var mainStr = 'akedf abc dde';

var span = document.createElement('span');
span.id = 'word';
span.innerHTML = '123';

var n = mainStr.replace('abc',span.innerHTML);

var htmlObject = document.createElement('div');
htmlObject.innerHTML = n; // the browser creates new span element
$(htmlObject).find("span").click(this.touchHandler); // click handler attached