如何使用javascript编辑HTML内容？

Question

我的网站中有一个部分，用户可以在其中输入问题的答案。例如，问题表明：

电影我看过的次数最多： 答案：婚礼闯入者

问题旁边有一个编辑按钮。当用户点击编辑按钮时，我希望网站打开一个带有Wedding Crashers的文本框，其中包含与原始答案框相同的位置。用户可以编辑答案并将其更改为另一部电影。文本框下方应该有一个保存和取消按钮。一旦用户将Wedding Crashers的答案更改为另一部电影并单击“保存”，文本框将消失，新的答案将显示在网站上。目前我只想编辑硬涂层的HTML内容。我稍后将连接到数据库并根据他/她的回答发出查询以更新用户数据库。我认为这与javascript和display：block和display：hide的CSS属性有关。有人可以帮忙吗？

Answer 1

看到您与Rails相关的其他问题，您可以使用现场编辑解决方案，例如

https://github.com/bernat/best_in_place

是你需要的吗？

Answer 2

哇！单击编辑按钮对我来说听起来像1999 ...

您是否考虑使用纯文本输入（具有正确的样式，没有边框等）在hover / focus上显示为可编辑？你还需要一些javascript来输入一个请求（AJAX用于更好的用户体验或在禁用js时正常POST）并从字段中删除焦点。我这样做是为了工作。它的效果非常好。

Answer 3

你可以使用这样的东西：

document.getElementById('someid').innerHTML = 'Fred Flinstone';

并且用于更改CSS属性：

document.getElementById('someid').style.borderWidth = '4px';

Answer 4

文本框是否绝对必要？

您可以将HTML5（http://html5demos.com/contenteditable）的奇迹用于支持它的浏览器。