JS: Come inserire dinamicamente testo in uno SPAN?

Question

Senza utilizzare alcun framework JavaScript, come posso modificare dinamicamente il testo all'interno di un elemento SPAN.

io so come fare questo con un DIV, sarebbe il seguente:

document.getElementById('myDiv').innerHTML = '...' 

Qual è l'equivalente di questo per un elemento SPAN?

Answer 1

getElementById() fare esattamente come dice il nome: ottenere un elemento con attributo id è uguale all'argomento; quindi, se si dispone di un lasso di nome "mySpan", il codice dovrebbe essere:

document.getElementById('mySpan').innerHTML = '...'

Answer 2

Questa tecnica specifica funziona per qualsiasi elemento, anche se l'avvertenza sull'utilizzo di elementi come le div è che sostituirà gli elementi interni e non solo il testo.

Se si desidera solo sostituire il testo si può farlo:

function replaceText(el, str) { 
    el.textContent ? el.textContent = str : el.innerText = str; 
} 

replaceText(spanReference, 'blah') 

Answer 3

È possibile utilizzare innerHTML per elementi span anche.

Cosa è successo quando hai provato a farlo?

Per un breve esempio si può guardare: http://bytes.com/topic/javascript/answers/149023-there-faster-way-change-span-innerhtml

Answer 4

innerHTML funzionerà ma può essere pericoloso in alcune situazioni, se non sai quello che stai facendo. Può inserire tag HTML, non solo testo, aprendoti eventualmente ad attacchi XSS, ecc.

Il codice textContent con innerText fallback che alcuni hanno proposto è un'idea migliore in quanto non devi preoccuparti dell'iniezione di script, ecc.

Se non è necessario supportare IE8 e versioni precedenti, utilizzare textContent senza fallback. IE9 e versioni successive supportano textContent.