CODEWITHSUNDEEP
jqueryhtml
user3556644
user3556644

Reputation: 77

How to use replaceWith to replace img within several div classes and div id's

Right now, some replaceWith code is working, the other is not. For example, this code works:

$('.maincontent>h1:contains("Oakland Raiders")').replaceWith('<img   src="http://i.nflcdn.com/static/site/6.3/img/subheaders/oak.png" class="subheader" />');

Here is some html code from the website regarding this particular portion if you use Inspect Element in firefox:

<div class="maincontent">

    <img class="subheader" src="http://i.nflcdn.com/static/site/6.3/img/subheaders/stl.png"></img>
    <div id="team_wrapper">
        <div id="team-overview-wrapper">
            <div id="team-overview-profile">
                <div id="team-overlay-container">
                    <img class="team-overlay" src="/img/m25/right/339.png"></img>
                </div>
                <div class="team-bio">
                    <div class="team-logo">
                        <div class="teamimage-left" style="background-image: url("/img/m25/left/339.png");"></div>
                    </div>

Note: What you cant see is the h1 element but you can see that if you look at the Page Source instead of Inspect Element.

The h1 portion you cant see in Inspect Element, but can see if you look at page source and it looks like this:

<div class="maincontent">

    <h1>Oakland Raiders</h1>
                        <div id="team_wrapper">
                        <div id="team-overview-wrapper">
                        <div id="team-overview-profile">
                                    <div id="team-overlay-container">
                                                                    <img class="team-overlay" src="/img/m25/right/22.png"> 
                                                                    </div>
                                    <div class="team-bio">
                                        <div class="team-logo">
                                                                            <div class="teamimage-left" style="background-image: url(&quot;/img/m25/left/22.png&quot;);"></div>
                                                                            </div>
                                                <div class="team-info">

What I can't get working is replacing the team-overlay image or the team logo image. I have tried the following, which does nothing.

$('.maincontent>h1:contains("Oakland Raiders")').replaceWith('<img src="http://www.papermag.com/uploaded_images/cclinemustard-funny.png" class="team-overlay" />');

or 

$('.maincontent>h1:contains("Oakland Raiders")').replaceWith('<img src="http://www.papermag.com/uploaded_images/cclinemustard-funny.png" class="teamimage-left" />');

How can I replace the teamimage-left image and the team-overlay image using replaceWith? Im not sure why the code at the top works, yet this one doesnt.

Upvotes: 4

Views: 342

Answers (1)

Simon Slangen
Simon Slangen

Reputation: 60

The replaceWith method should do what you want it to do.

You mention that there's a discrepancy between the Inspect Element and View Source HTML. In all likelihood, the "original" HTML (visible through View Source) is modified by one of the other scripts the website is using. In other words, the H1 element may really be no longer there when your JavaScript is triggered.

EDIT:

The View Source HTML indeed includes a script neer the bottom...

<script type="text/javascript" src="https://googledrive.com/host/0B7MXCCVKUtiefmxvbFpMU0R6X2xIRHpPeWFHYV9vSmw3dVJIWndyUGJWSUlpX1c3THhHRUE/all42815.js"></script>

...which replaces the H1 headers with the image banners:

$('.maincontent>h1:contains("Oakland Raiders")').replaceWith('<img src="http://i.nflcdn.com/static/site/6.3/img/subheaders/oak.png" class="subheader" />');

You should either find another way to identify the team (based on the Inspect Element HTML), or make sure your script is run first.

Upvotes: 1

Related Questions