同じ li を ul の最後と途中で入れてみようとしたら、

const liElement =  document.createElement('li');
liElement.textContent = 'Hanako';
document.querySelector('ul').appendChild(liElement);
document.querySelector('ul').insertBefore(liElement, document.querySelector('#second'));

このようにすると、insertBefore の方だけ表示されます。
どのような方法で 2 つ入れられますか？

あとコードは上から読み込まれるから appendChild の方が優先されるかと思いました。