Besoin d'une petite explication pour les getElementById svp

bonjour a tous
je pense avoir compris le principe des getElementById

avec ce lien
https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_dom

mais cela ne semble pas fonctionner chez moi

pour rappel j'ai donc un formulaire html et une page panier.js

je souhaiterais afficher sur ma page de formulaire certaines données
je pensais avoir réussi mais je m aperçois que cela entre en conflit des fois
donc autant bien faire les choses et surtout les comprendre

alors pour commencer dans mon fichier panier.js
j'ai repérer cette ligne

document.getElementById('livraison-detail').innerHTML = "<div class='row' style ='margin-bottom:5px;'><div class='col'></div><div class='col'style='text-align:center;background-color: #78b8df;'>Livraison </div><div class='col ' style='text-align:center;background-color: #78b8df;'>Méthode</div><div class='col' style='text-align:center;background-color: #78b8df;'> (" + nom_choix_livraison + ") </div><div class='col' style='text-align:center;background-color: #78b8df;'> " + prix_choix_livraison +" euro(s)</div></div>";

et je parviens a la récupérée de cette façon sur ma page du formulaire

<i id="livraison-detail"></i>

jusque la tout va bien même si je me demande pourquoi il y a un "i" devant l id
c est vrai que j aurais pu mettre un p et un </p>

donc d après ce que je peux comprendre cela est suffisant pour transmettre les données du panier vers le formulaire ?

une autre question
je vois aussi
un div avec id écrit de cette manière dans le code source sur lequel je m'inspire pour créer mon panier

<div>*Prix total: <b><span class="total-panier" id="prix_total">9.00</span> euros</b></div>
mais dans le panier.js je ne vois pas de document.getElementById('total-panier')
le seul endroit ou ce total-panier est visible c'est dans le code javascript ci dessous

Alors j'ai une troisième question cette partie ne concerne bien que pour le traitement des données et l envois des données par mail ?

<script>
function commander(nom,prenom,cp,email,commande,prix_total,message,ville,detail_livraison){
$.ajax({
url : 'mail.php',
type : 'GET', 
data : 'nom=' + nom + '&prenom=' + prenom + '&cp=' + cp + '&email=' + email + '&commande=' + commande + '&prix_total=' + prix_total + '&message=' + message + '&ville=' + ville + '&livraison=' + detail_livraison, 
dataType : 'html',
success : function(reponse){
if (reponse == "1"){
 MonPanier.clearpanier();
 afficherpanier(); 
 document.body.scrollTop = 0;
 document.documentElement.scrollTop = 0;
 $('#mymodal').modal('show'); 
}
if (reponse == "0"){$('#mymodal_erreur').modal('show');}
}
});
}
$('#commander').click( function(){
var nom = document.getElementById("nom").value;
var prenom = document.getElementById("prenom").value;
var cp = document.getElementById("cp").value;
var ville = document.getElementById("ville").value;
var email = document.getElementById("email").value;
var commande = JSON.stringify(panier);
var detail_livraison = document.getElementById("livraison-detail").innerHTML;
var prix_total = document.getElementById("prix_total").innerHTML;
var message = encodeURIComponent(document.getElementById("message").value);
commander(nom,prenom,cp,email,commande,prix_total,message,ville,detail_livraison);
});
</script>