javascript - Whitespace passerer ikke tilleggstildeling for HTMLElement

Jeg prøver å gradvis legge til bokstaver til et HTMLElement, men hvite mellomrom (de fleste mellomrom, noen linjeskift) ser ut til å forsvinne når jeg gjør dette

For eksempel:

let s = "f o o b a r";
let e = document.createElement('span');
for (let i = 0; i < s.length; i++) {
  // do some stuff
  e.innerText += s[i];
}

// e.innerText = "foobar"

Jeg har gått gjennom koden og sett e.innerText += " " når s[i]=" ", men jeg kan ikke forstå hvorfor det ikke legges til i e. Min antagelse er at mellomrommet på en eller annen måte blir fjernet fordi det er det siste elementet, men jeg er usikker på hvordan jeg kan stoppe dette (bortsett fra å sette whitespace: pre, men det forhindrer også linjeskift og virker overdrevent)

Svar #1

du kan bruke t.textContent += s[i];

InnerText representerer bare det synlige tekstinnholdet i et element og inkluderer ikke mellomrom eller HTML-tagger.

Svar #2

Dette er sannsynligvis et HTML-problem snarere enn et JavaScript-problem. I HTML blir mellomrom i kilden sammenføyet slik at det bare vises ett mellomrom på siden. Det ble designet på denne måten slik at når forfattere av HTML-sider kunne sette inn så mange linjeskift eller innrykk de ønsket for organisering uten å påvirke visningen.

I ditt tilfelle, siden du vil at mellomrommet skal vises, er det noen få valg for hvordan du kan omgå dette:

  1. Du kunne vurdere å bruke en CSS-direktiv som white-space: pre-wrap, som bevarer mellomrom samtidig som det fortsatt tillater tekst å flyte over linjer.
  2. I stedet for å sette inn mellomrom, kan du sette inn ikke-brytende mellomrom, som aldri kollapser.
  3. Siden innerText-egenskapen er «bevisst på den rendrerte utseendet til teksten», vil verdien av egenskapen i JavaScript reflektere hvordan mellomrom behandles i DOM. Så hvis mellomrom kollapseres, vil de også bli fjernet fra verdien av innerText. Du kan unngå dette ved å bruke den standard textContent-egenskapen i stedet.

For å lære mer, kan du lese mer om det grunnleggende om sammenfall av mellomrom på MDN her.

Hvis dette ikke svarer på spørsmålet ditt, anbefaler jeg at du legger til et skjermbilde av hva du forventet versus hva du fikk til ditt opprinnelige spørsmål for å hjelpe folk med å gi mer nøyaktige svar.

Relaterte artikler