如何使用javascript将div / span标签插入textarea？

Question

我的html文件中有一个textarea，我的.js文件添加了一些文本行。我希望线条有不同的颜色。所以我想在span / div标签中包含这些行（为了设置每行的不同颜色）并将它们插入我的textarea。

我的textarea是：

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

我的.js代码是：

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

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

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

当我运行此代码时，我可以看到div附加在textarea html代码下。但是我没有在页面的textarea中看到文本（“hi！there”）和我的div。

任何人都可以帮助我吗？

Answer 1

使用contenteditable属性

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

appendChild函数将元素追加到目标元素之后。

要将内容放在元素中，请像使用div一样使用innerHTML。