I was first trying to use .innerHTML, and quickly realized, based on the method name alone, that this only works when working with the content of elements, and not attribute values. Using .value, however, is just as easy:
let input_value = document.getElementById("some_unique_id").value; document.getElementById("some_unique_id").value = 'Change the value content to this :-D';
The above example shows both how to fetch the value, and to change it. As you can see, there is not much difference in how you use .innerHTML and .value when coding.
Another problem that few seem to consider is that you can not easily tell search engines when your content was last updated. By using a server-side language, however, this can be done in the HTTP headers.
Elements have default behaviors that are not easily changed, unless you know how to do it. Even then, why would you? When you have perfectly good, semantic elements, already serving the function you want?
If you must use custom elements, consider changing the role and tabindex attributes on the element to make it more accessible.
<div role="button" tabindex="0">Post Comment</div>
role="button" is used to turn your element into a button, which should expose it as a button in user agents. Screenreaders should announce it as a button to the user, and it should work exactly like a button.
tabindex makes the element focusable, and part of the taborder in the document. This is used to control the order that elements gain focus when using the tabulator key on a keyboard to navigate.