jquery html方法xss,html() vs innerHTML jquery/javascript & XSS attacks

I'm testing xss attacks on my own code. The example beneath is a simple box where an user can type whatever he wants. After pressing "test!" button, JS will show the input string into two divs.This is an example I made to explain better my question:

function testIt(){

var input = document.getElementById('input-test').value;

var testHtml = document.getElementById('test-html');

var testInnerHTML = document.getElementById('test-innerHTML');

$(testHtml).html(input);

testInnerHTML.innerHTML = input;

}

if you try to copy it into a .html file and run it, it will work fine, but if you try to input alert('xss'), only one alert box will be thrown: the one inside `test-html' div (with html() function).

I really can't understand why this is happening, and also, inspecting the code with firebug gives me this result (after injecting the script)

this is a test

alert('xss')

as you can see test-html div is empty, and test-innerhtml div contans the script. Can someone tell me why? Is because html() is more secure against scripts injection or something similar?

Thanks in advance, best regards.