Comment insérer des balises div/span dans textarea en utilisant javascript?

Question

J'ai une zone de texte dans mon fichier html et quelques lignes de texte y sont ajoutées par mon fichier .js. Je veux que les lignes soient de couleurs différentes. Donc, je veux envelopper ces lignes dans les balises span/div (afin de définir les différentes couleurs pour chaque ligne) et les insérer dans mon textarea.

Mon textarea est:

<textarea class="history" cols="150" rows="5" readonly="true"></textarea> 

et mon code .js est:

var div = document.createElement('div'); 

div.setAttribute("color", "green"); 
div.innerHTML = "hi! there"; 

document.querySelector(".history").appendChild(div); 

Quand je lance ce code, je peux voir que le div est ajouté sous le code html textarea. Mais je ne vois pas le texte ("salut!") et mon div dans le textarea de la page.

Quelqu'un peut-il m'aider?

Answer 1

utiliser l'attribut contenteditable

<p contenteditable="true"> 
    <h1>This is a paragraph.</h1> 
    It is editable. Try to change this text. 
</p> 

fonction appendChild ajoute l'élément après que l'élément cible.

Pour mettre du contenu à l'intérieur de l'élément, utilisez innerHTML comme vous l'avez fait pour div.