innerHTML 在点击时没有改变

Question

我想使用我的按钮在textarea字段中已经存在的内容下面添加一行文本。有时它被填充，有时它不被填充(由$Item["description"]确定(。

当我在W3schools编辑器中尝试它时，它是有效的，那么我缺少什么呢？这与在文本区域内放置div有关吗？

function addNewMessage() {
document.getElementById("container").innerHTML += "<p><em>Here is the new message!</em></p>";
}

<textarea name='short_description' id='short_desc' form='edit_item'>
<div id='container'>Foo bar</div>
</textarea>

Answer 1

不能在<textarea>中放置其他元素。请改用contenteditablediv元素。

function addNewMessage() {
document.getElementById("container").innerHTML += "<p><em>Here is the new message!</em></p>";
}

#container {
border: 1px solid black;
padding: 2px;
}

<div id="container" contenteditable></div>
<input type='button' class='inputbutton' value='Add New Message' onclick="addNewMessage()">

Answer 2

问题是因为您的HTML无效，并且您试图在JS中更新它的方式不正确。textarea元素只能包含文本，而不能包含呈现的HTML，因此将<div id="container" />元素放置在那里将不起作用。

要执行所需操作，请更改HTML，使textarea仅包含文本，然后更新JS以检索#short_desc元素，并更新其value而不是innerHTML:

function addNewMessage() {
document.getElementById("short_desc").value += "Here is the new message! ";
}

textarea {
width: 400px;
height: 100px;
}

<textarea name="short_description" id="short_desc" form="edit_item">Foo bar </textarea>
<input type="button" class="inputbutton" value="Add New Message" onclick="addNewMessage()" />