houtianze / SCB LMI: TW Add LMI Tile

// ==UserScript==
// @namespace     https://openuserjs.org/users/houtianze
// @author        Hou Tianze
// @name          SCB LMI: TW Add LMI Tile
// @description   SCB LMI: Add a LMI tile to the TW website
// @copyright     2017, houtianze (https://openuserjs.org/users/houtianze)
// @license       MIT
// @version       0.1.0
// @include       *://www.sc.com/tw/*
// @grant none
// ==/UserScript==

// ==OpenUserJS==
// @author houtianze
// ==/OpenUserJS==

(function() {
    'use strict';

    var tileParent = document.evaluate('//*[@id="pin_col_cont"]/div', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (tileParent !== null) {
        var lmiHtml = `
<div class="four columns" data-start="18-04-2017" data-end="11-04-2018">
    <article id="08-pin-隨時盡覽市場觀點" class="elements pinned-items wnew less-text">
        <a href="https://www.sc.com/retail/mce/index.html#/landing?lang=zh_HK&amp;ctry=HK&amp;channel=PLRB&amp;sapp=PUB   ">
            <div class="panel cf">
                <header>
                    <div class="next-arrow"></div>
                    <div class="overlay"></div>
                    <div class="grid cf">
                        <figure class="effect-lexi">
                            <img alt="隨時盡覽市場觀點" src="/global/av/mce/img/entry/pre/pintile-personal-banking.jpg">
                            <div class="elm-content-area large-txts hide-for-small">
                                <h6 class="subheader blue-txt">
                                    隨時盡覽市場觀點
                                </h6>
                                <p>想了解我們預期哪個資產類別表現出色?
                                    <br>
                                </p>
                            </div>
                            <figcaption>
                                <p>
                                    <img class="arrow-img" alt="arrow" src="/global/av/arrow-bg-1x.png">
                                </p>
                            </figcaption>
                        </figure>
                    </div>
                </header>
                <div class="elm-content-area large-txts show-for-small">
                    <h6 class="subheader blue-txt">隨時盡覽市場觀點</h6>
                    <p>想了解我們預期哪個資產類別表現出色?
                        <br>
                    </p>
                </div>
            </div>
        </a>
    </article>
</div>
`;
        var lmiNodeParent = document.createElement('div');
        lmiNodeParent.innerHTML = lmiHtml;
        var lmiNode = lmiNodeParent.firstElementChild;
        console.log(lmiNode);
        tileParent.insertBefore(lmiNode, tileParent.firstElementChild);
        console.log("Inserted LMI tile");
    }
})();