I am trying to change the content of an element by DOM. I've been doing some research and discovered the replaceChild property that allows me to change nodes (the existing one with a new one with my text to be introduced) but of course, when replacing the node I find the problem that if I replace a UL (in my concrete example) it does not save the inheritance by deleting the child nodes as usual.
Any way to change the content of a node by DOM? Thank you.
function elemento(event){
var elemento_li = document.createElement(event.target.tagName);
var texto_li = document.createTextNode("Nuevo nombre de bebida");
elemento_li.appendChild(texto_li);
var padre = event.target.parentNode;
padre.replaceChild(elemento_li,event.target);
}<div onclick="elemento(event)">
<ul> <!-- Primer ul -->
<li>Coffee</li>
<ul> <!-- Segundo ul -->
<li>Coffee</li>
<ul> <!-- Tercer ul -->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<li>Tea</li>
<li>Milk</li>
</ul>
<li>Tea</li>
<li>Milk</li>
</ul>
<!-- /container -->
</div>