JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<div class="comic-id-2435" id="comic-wrap">
    <div id="comic-head">
        <div class="customsidebar " id="sidebar-overcomic">
            <div class="comic_navi_wrapper">
                <table class="comic_navi">
                    <tbody>
                        <tr>
                            <td class="comic_navi_left">	<a title="" class="navi navi-first" href="http://www.channelate.com/2008/02/13/wear-a-clean-shirt/"></a>
	<a title="" class="navi navi-prev" href="http://www.channelate.com/2014/09/02/running/"></a>

                            </td>
                            <td class="comic_navi_center">	<a title="" class="navi navi-random" href="http://www.channelate.com/?randomcomic&amp;nocache=1"></a>

                            </td>
                            <td class="comic_navi_right">	<a title="" class="navi navi-next" href="http://www.channelate.com/2014/09/09/the-talk-3/"></a>
	<a title="" class="navi navi-last" href="/?latestcomic&amp;nocache=1"></a>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div id="comic">
        <div class="comicpane" id="comic-1">
            <img title="Glad I’m not you." alt="Glad I’m not you." src="http://www.channelate.com/comics/2014-09-03-losers.png">
        </div>
        <!-- Last Update: Sep 3rd, 2014 // -->
        <style type="text/css">
            .extrapanelimage {
                opacity: 0.1
            }
            .extrapanelimage:hover {
                opacity: 1
            }
        </style>
        <div class="comicpane" id="extracomic-1">
            <img src="http://channelate.com/extrapanels/losersEX.png" class="extrapanelimage">
        </div>
    </div>
    <div class="customsidebar " id="sidebar-comicright">
        <div class="widget extra-panel-link" id="jbextrapanels_ep-5">
            <div class="widget-content">
              ...

JavaScript

var extrapanelbutton = document.getElementById("extrapanelbutton");

if (typeof (extrapanelbutton) != 'undefined' && extrapanelbutton != null) {
    var comicArea = document.getElementById("comic");
    var clonedComic = comicArea.getElementsByClassName("comicpane").lastChild.cloneNode(true);
    clonedComic.id = "extra" + clonedComic.id;
    clonedComic.getElementsByTagName("img")[0].remove();
    var cssEle = document.createElement("style");
    cssEle.type = "text/css";
    //cssEle.innerHTML = ".extrapanelimage img { opacity: 0.1 } .extrapanelimage img:hover { opacity: 1 }";
    cssEle.innerHTML = ".extrapanelimage { opacity: 0.1 } .extrapanelimage:hover { opacity: 1 }";
    comicArea.appendChild(cssEle);
    comicArea.appendChild(clonedComic);
    var extrapanel = extrapanelbutton.getElementsByTagName("a")[0].href;
    $('#extracomic-1').load(extrapanel + ' .extrapanelimage');
} else {
    console.log("This page (seemingly) does not have a comic/extra panel.");
}