Así que tengo algo como esto en mi html:
<div id="basket"> <div id="item">Apple</div> </div> <div id="basket"> <div id="item">Orange</div> </div> <div id="basket"> <div id="item">Banana</div> </div> // And so on¿Cómo podría cambiar el HTML interno de cada div de 'elemento' individualmente? Por ejemplo, ¿cómo cambiaría el div que dice 'banana' a otra cosa?
Como ya se mencionó en los comentarios, una identificación debe ser única, por lo que debe cambiarla a clases.
Luego, para resolver su problema, puede usar querySelectorAll para seleccionar todos los elementos con el item de clase. Luego demanda el forEach -loop y verifica el HTML interno de cada Elemento. si coincide con "Banana", puede reescribir el HTML interno (aunque debe usar textContent por razones de seguridad):
document.querySelectorAll('.item').forEach(el => { if (el.textContent == 'Banana') { el.textContent = 'The Minions ate the Banana'; } }) <div class="basket"> <div class="item">Apple</div> </div> <div class="basket"> <div class="item">Orange</div> </div> <div class="basket"> <div class="item">Banana</div> </div>