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

Answer 2

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

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

例子