ich generiere mit PHP Nachrichten mit einem Edit-Button im Titel um diese zu bearbeiten. Mit JS registrier ich dann nen Onclick-Handler und ersetze die Nachricht (Paragraph) mit einer Textbox.

Aber mir fällt dabei auf, dass ich im JS dann von diesem Button im DOM-Tree ausgehen muss. Also mach ich sowas wie $(this).parent().children().last() um an diesen Paragraphen zu kommen.

Wenn sich dann irgendwann mal was im Tree ändert, sodass man beispielsweise von parent().parent() ausgehen muss, ist der JS Code kaputt.

Wie kann ich da absolut an die Sache rangehen?

<h1>
	<span>Title</span>
	<button id="but123" data-message-id="msg123">EDIT</button>
</h1>

<p id="msg123">Meine Nachricht oder sonst was</p>

document.getElementById('but123').addEventListener('click', function(event) {
	var messageId = event.target.dataset.messageId;
	var messageObject = document.getElementById(messageId);

	messageObject.innerHTML = '<textarea>' + messageObject.innerHTML + '</textarea>';
});