Comment puis-je insérer une nouvelle ligne ou un retour à la ligne dans element.textContent ?

Question

Supposons que je veuille créer dynamiquement un nouvel élément DOM et remplir son texte avec un littéral de chaîne JS.
La chaîne est si longue que je voudrais la diviser en trois morceaux :

var h1 = document.createElement("h1");

h1.textContent = "Ceci est une chaîne très longue et je voudrais insérer un retour à la ligne ICI...
de plus, je voudrais insérer un autre retour à la ligne ICI... 
ainsi ce texte s'affichera sur une nouvelle ligne";

Le problème, c'est que si j'écris

h1.textContent = "...Je voudrais insérer un retour à la ligne ici... \n";

cela ne fonctionne pas, probablement parce que le navigateur considère le '\n' comme un simple texte et l'affiche en tant que tel (le \r ne fonctionne pas non plus).

En revanche, je pourrais changer h1.innerHTML au lieu du textContent et écrire :

h1.innerHTML = "...Je voudrais insérer un retour à la ligne ici...";

Ici, le
ferait le travail, mais ce faisant, cela remplacerait non seulement le contenu textuel mais tout le contenu HTML de mon h1, ce qui n'est pas tout à fait ce que je veux.

Y a-t-il un moyen simple de résoudre mon problème?
Je ne voudrais pas créer plusieurs blocs d'éléments juste pour avoir le texte sur différentes lignes.

Answer 1

Vous pourriez utiliser des expressions régulières pour remplacer les caractères '\n' ou '\n\r' par '
'.

vous avez ceci:

var h1 = document.createElement("h1");

h1.textContent = "Ceci est une chaîne très longue et j'aimerais insérer un retour à la ligne ICI...
de plus, j'aimerais insérer un autre retour à la ligne ICI... 
donc ce texte s'affichera sur une nouvelle ligne";

vous pouvez remplacer vos caractères comme ceci:

h1.innerHTML = h1.innerHTML.replace(/\r\n?/g, '');

vérifiez la référence JavaScript pour les objets String et Regex:

http://www.w3schools.com/jsref/jsref_replace.asp

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Answer 2

Utiliser element.innerHTML="quelque \\\\n quelque";.

Answer 3

Aucune des solutions ci-dessus n'a fonctionné pour moi. Je cherchais à ajouter un saut de ligne et du texte supplémentaire à un élément

. J'utilise généralement Firefox, mais j'ai besoin de compatibilité avec d'autres navigateurs. J'ai lu que seul Firefox prend en charge la propriété textContent, seul Internet Explorer prend en charge la propriété innerText, mais les deux prennent en charge la propriété innerHTML. Cependant, ni l'ajout de, ni de \n, ni de \r\n à aucune de ces propriétés n'a entraîné un saut de ligne. Cependant, ce qui suit a fonctionné :

  function modifyParagraph() {

  var p;
  p=document.getElementById("paragraphID");
  p.appendChild(document.createElement("br"));
  p.appendChild(document.createTextNode("Texte supplémentaire."));
}    

Texte original.

Answer 4

J'ai trouvé que l'insertion de \\n fonctionne. C'est-à-dire, vous échappez le caractère de nouvelle ligne échappé

Answer 5

J'avais ce problème, et après avoir ajouté le style css comme le suggère la réponse de Nelek, j'ai réussi à le faire fonctionner avec une chaîne de modèles. Je voulais utiliser les chaînes de modèles car je tirais et affichais des données à partir d'autres éléments.

var h1 = document.createElement("h1");

//en définissant ce style css, le problème de retour à la ligne dans textContent est résolu.

    h1.setAttribute('style', 'white-space: pre;');

// L'utilisation des backticks a fonctionné pour moi après avoir ajouté le style css

    h1.textContent = `
       Bonjour, je m'appelle
       ${name.firstName()} ${name.lastName()}.
       Aujourd'hui est
       ${date}.
    `;

document.body.appendChild(h1);