用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

不是这样 将跨度插入文档（ var n = ... ）的方式将跨度视为哑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

Answer 2

1. 您将事件附加到htmlObject中不存在的其他元素。 您需要将事件附加到htmlObject内的span元素，因为innerHTML不会复制事件侦听器

2. 当您使用innerHTML ，实际上并没有得到"<span>123</span>" ，而是得到了"123" 。 您可以使用span.outerHTML或仅使用字符串var spanString = "<span>123</span>"; 和var n = mainStr.replace('abc',spanString);

例