jQuery - Replace text with text plus html element

Question

I have some text I wish to replce using jquery. the problem is, is that this text is not within it's own element, the content is dynamic and I can not access HTML the markup to make things easier.

I can detect and replace the text in question, but I have only managed to replace it with a new text node, therefore it treats my html tags as text and not markup

DEMO http://jsfiddle.net/XvTgP/

$('div.myDiv').contents().filter(function () {
    return this.nodeType == 3
}).each(function () {
    this.textContent = this.textContent.replace('my old text no in its own element', '<div class="newClass">my new text</div>');
    var myNewNode = this.textContent;
    return
});

CURRENT OUTPUT AS TEXT

<div class="newClass">my new text</div>

adeneo · Accepted Answer · 2014-04-14 16:02:12Z

1

Just replace the textNode with the DIV using replaceWith()

$($('div.myDiv div').get(0).nextSibling).replaceWith('<div class="newClass">my new text</div>');

FIDDLE

answered Apr 14, 2014 at 16:02

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

Surreal Dreams · Accepted Answer · 2014-04-14 16:06:18Z

0

Try adding html when you assign the HTML content:

$('div.myDiv').contents().filter(function () {
    return this.nodeType == 3
}).each(function () {
    this.textContent.html = this.textContent.replace('my old text no in its own element', '<div class="newClass">my new text</div>');
    var myNewNode = this.textContent;
    return
});

I think you can simplify a bit more:

$('div.myDiv').contents().filter(function () {
    return this.nodeType == 3
}).each(function () {
    this.html(this.textContent.replace('my old text no in its own element', '<div class="newClass">my new text</div>'));
});

Here's a jsfiddle showing that it works: http://jsfiddle.net/XvTgP/5/

edited Apr 14, 2014 at 16:06

answered Apr 14, 2014 at 16:01

Surreal Dreams

26.4k4 gold badges49 silver badges61 bronze badges

Comments

kpblc · Accepted Answer · 2014-04-14 16:09:52Z

0

if i correctly understand question

$('div.myDiv').contents().filter(function () {
    return this.nodeType == 3
}).each(function () {
    this.textContent = this.textContent.replace('my old text no in its own element', '<div class="newClass">my new text</div>');
    var myNewNode = this.textContent;
    var myParentNode = myNewNode.parent();
    myParentNode.append(myNewNode);
    return
});

answered Apr 14, 2014 at 16:09

kpblc

9021 gold badge8 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery - Replace text with text plus html element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related