Question

我在下图中有2 div个像。 1 div左侧的联系人位于id='contacts-list'，另一位div位于右侧，表格位于id='contacts-details'。左侧的数据添加了以下结构：

<div class='contact_entry' id='[contact_id]'>
     <span class='contact_entry_details'>[contact firstname][contact surname]</span>
</div>

[contact_id]是MYSQL中使用PHP的值，即联系人ID。 [contact firstname]和[contact surname] - 从MYSQL中获取的值

当我单击提交时，使用AJAX XMLHttpRequest对象将数据添加到数据库中。当我点击提交要添加到div的div中的新id='contact-details'（具有上述结构）时，我该怎么做？（我想用Javascript / AJAX，没有jQuery或其他框架）

要删除一个很简单，我使用PHP来做，对于div我使用Javascript做这样的事情：

var elem_to_delete = document.getElementById(id);
elem_to_delete.parentNode.removeChild(elem_to_delete);

我想要这样的东西，但要添加数据，而不是删除...我想要上面的结构，因为我在每个'contact-entry'div上都有一个关于点击事件监听器的Javascript，要打开他的详细信息在右侧，“联系方式”div。