Confused with the difference between HTTP entity code and the raw

Code:

<script>
function f(input) {
    retu '<article>' + input + '</article>';
}     
document.write(f('<script>alert(1)</script>')); //alert 1
document.write(f('&lt;script&gt;alert(1)&lt;/script&gt')); // write normal text
</script>

In my idea, <script>alert(1)</script> is the same as <script>alert(1)</script&gt(the raw vs http entity codes), but it results different result, could any body explain about that?