Uso de appendChild varias veces con el mismo nodo en JS

Question

Estoy escribiendo un script de validación de formulario para un formulario con múltiples clasificaciones, y me gustaría insertar un texto que dice "dar una calificación". para cada calificación que el usuario pierde. Escribí el código a continuación para hacer esto, pero me encuentro con un problema donde el nodo give_rating solo se agrega al último nodo en el formulario. Sé que esto se debe a que appendChild básicamente mueve un nodo en lugar de duplicarlo, y traté de resolver esto usando cloneNode, pero eso solo rompe mi JS por completo.

De todos modos, aquí está el código. ¿Qué estoy haciendo mal?

Gracias por su ayuda,

Chris

var give_rating = document.createElement('span'); 
give_rating.className='small red'; 
give_rating.innerHTML = '<strong> &nbsp;Give a rating!</strong>'; 

document.getElementById('rating1').appendChild(give_rating); 
document.getElementById('rating2').appendChild(give_rating); 

Cuando utilizo el código anterior give_rating código sólo se añade al 'rating2'.

document.getElementById('rating1').appendChild(give_rating.cloneNode(True)); 
document.getElementById('rating2').appendChild(give_rating.cloneNode(True)); 

Cuando uso este código, todo el script falla. ¿Cómo agrego una instancia de "Dar una calificación"? para cada calificación en mi formulario que el usuario no completa?

Answer 1

JavaScript distingue entre mayúsculas y minúsculas: True debe ser true (minúscula).

Answer 2

1. Solo puede insertar los elementos html o documentos creados una vez. Por lo tanto, debe llamar a la función cloneNode().
2. El javascript distingue entre mayúsculas y minúsculas. Por lo tanto, debe ser cloneNode(true), en lugar de cloneNode(True).
3. Puede activar el depurador de JavaScript del navegador (tanto Chrome como IE/Edge) presionando F12. Entonces puedes ver lo que sucede con tu script.