jQuery find and insert (jQuery replace)

Question

<div class="twtr-tweet-text">
    <p>lorem ipsum <em>date 19th nov</em></p>
</div>
<div class="twtr-tweet-text">
    <p>lorem ipsum <em>date 18th nov</em></p>
</div>
<div class="twtr-tweet-text">
    <p>lorem ipsum <em>date 17th nov</em></p>
</div>

How can I transform this block to the code below. Keeping in mind that multiple blocks contain the same class names etc.

<div class="twtr-tweet-text">
    <p><img src="speech_left.jpg" />lorem ipsum <img src="speech_right.jpg" /><em>date 19th nov</em></p>
</div>

So before the <em> starting tag and right after the <p> tag after the .twtr-tweet-text{} class.

user527892 · Accepted Answer · 2011-11-21 15:30:57Z

5

$('.twtr-tweet-text p').prepend('<img src="speech_left.jpg" />');
$('.twtr-tweet-text em').before('<img src="speech_right.jpg" />');

answered Nov 21, 2011 at 15:30

user527892

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

3 Comments

TheBlackBenzKid Over a year ago

It won't work, and it does not bring errors, so my CSS call is not working. I though jQuery can do CSS jumps, edit code.

TheBlackBenzKid Over a year ago

$(document).ready(function () { $('.twtr-tweet-text p').prepend('<img src="/blog/assets/imgs/speech-mark-left.jpg" />'); $('.twtr-tweet-text p em').before('<img src="/blog/assets/imgs/speech-mark-right.jpg" />'); });

TheBlackBenzKid Over a year ago

How could I do this in NORMAL javaScript?

Community · Accepted Answer · 2017-05-23 11:55:29Z

1

You can use, in addition to Scott's answer:

$('<img src="speech_left.jpg" />').prependTo($('.twtr-tweet-text p'));

Edited to add a plain-JavaScript means of achieving the same:

var elems = document.getElementsByTagName('p'),
    leftImageSrc = 'speech_left.jpg',
    rightImageSrc = 'speech_right.jpg',
    className = 'twtr-tweet-text',
    parent, // used in the loop, below
    img; // used in the loop, below

for (i=0;i<elems.length;i++){
    parent = elems[i].parentNode; // looking at two qualities of the parent,
                                  // so storing it in a variable
    if (parent.tagName.toLowerCase() == 'div' && parent.className == className){
    // the 'if' tests that the parent is a div, and
    // that the parent has a class-name of 'twtr-tweet-text'
        // left image:
        lImg = document.createElement('img');
        lImg.src = leftImageSrc;
        // the firstChild of the elems[i] element is the textNode
        elems[i].insertBefore(lImg,elems[i].firstChild);

        // right image:
        rImg = document.createElement('img');
        rImg.src = rightImageSrc;
        elems[i].appendChild(rImg);
    }
}

JS Fiddle demo.

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Nov 21, 2011 at 15:32

David Thomas

254k53 gold badges382 silver badges421 bronze badges

3 Comments

TheBlackBenzKid Over a year ago

How could I do Scott Brown and your answer in NORMAL javaScript?

David Thomas Over a year ago

See the edited/updated answer. I'm not sure about IE (unavailable for testing), but it works in Chromium 14 and Firefox 7.

user527892 Over a year ago

...and this is why I use jQuery :-)

Collectives™ on Stack Overflow

jQuery find and insert (jQuery replace)

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related