Replace string with DOM element

Question

I have a string in which I like to replace some part with DOM element:

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')
},

this code does not work, the 'abc' string is replaced with '123' but the touchHandler does not work.

The code is in Backbone.js

Is there some way that I can do this?

Might help if you include the code for touchHandler if it's the bit that's not working. — Andy
– Andy, Commented Oct 4, 2013 at 9:04
you attach the click event to span, yet you only use span.innerHTML, this can't clone the event, so just attach the event to $('span',htmlObject) instead, and use outerHTML, not innerHTML — GuiDocs
– GuiDocs, Commented Oct 4, 2013 at 9:05
You seem to be using jQuery, so why bother with document.createElement() when jQuery lets you do the same thing with less typing? — nnnnnn
– nnnnnn, Commented Oct 4, 2013 at 9:09

Jon · Accepted Answer · 2013-10-04 09:05:50Z

2

Not like this. The way you insert the span into the document (var n = ...) treats the span as dumb HTML and leaves it to the browser to actually create the element and insert it into the DOM; your own span element is not inserted, therefore the click handler doesn't work.

You can attach the handler to the actual element this way:

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

answered Oct 4, 2013 at 9:05

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

onetwo12 Over a year ago

Thanks this worked with one change var n = mainStr.replace('abc',span.outerHTML); as user2786485 suggested.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

you are attaching the event to a different element, that doesn't exist in htmlObject. you need to attach the event to the span element that is within htmlObject, because innerHTML doesn't copy event listeners
when you use innerHTML you dont actually get "<span>123</span>", instead you get "123". you can either use span.outerHTML or just a string var spanString = "<span>123</span>"; and var n = mainStr.replace('abc',spanString);

example

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 4, 2013 at 9:19

GuiDocs

7421 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

Replace string with DOM element

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related