JSFiddle - React, Tailwind, and code Playground

by Songhun

HTML

<b>Test1 (Not Worked on IE)</b>
<ol class="_target1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="more"><a href="#">More[Click]</a></li>
</ol>
<br/>
<b>Test2 (Worked on IE)</b>
<ol class="_target2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="more"><a href="#">More[Click]</a></li>
</ol>

<ol class="_forReplace" style="display:none;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ol>

JavaScript

$("ol._target1").delegate("li.more", "click", function(event){
    event.preventDefault();
    var elMore = $("ol._target1").find("li.more"); // A point is here.
    var elOL = $("ol._target1").html($("ol._forReplace").html());
    elOL.append(elMore);
});

$("ol._target2").delegate("li.more", "click", function(event){
    event.preventDefault();
    var elMore = $("ol._target2").find("li.more").clone(); // Use Clone for IE
    var elOL = $("ol._target2").html($("ol._forReplace").html());
    elOL.append(elMore);
});