i have this contacts.txt (from notepad)

kate|female|kathryn bailey beckinsale|26-jul-1973|#23 underworld drive|(621) 142-7827|kate@lycans.net
jessica|female|jessica claire biel|03-mar-1982|27 texas avenue|(53)2344223|jbiel@yahoo.com
johnny|male|john christopher depp ii|09-jun-1963|711 pirate road|(773) 476-6634|jsparrow@piratebay.org

this is html and javascript:

<link rel="stylesheet" type="text/css" title="Preferred" href="css.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function syncText() {
var xhr = new XMLHttpRequest();
xhr.open("get", "data/contacts.txt", false);

if (xhr.status == 200) {
var data = xhr.responseText;
var items = data.split("\n");
var frag = document.createDocumentFragment();

for (i=0; i<items.length; i++){
els = items[i].split("|");
li = document.createElement("li");
li.innerHTML = els[0];


} else {
alert("data retrieval failed...");



<body onload="syncText()">

<div id="header">
<h1>My Contacts</h1>
<img src="data/resources/contacts.png" alt="Contacts" />

<h2>Contact List</h2>

<div id="header2" style="overflow:scroll;">
<ul id="list"></ul>

<h3>Contact Details</h3>
</div >

<div id="header3">
<td><input type="text" id="ajaxName" name="name"><td>
<td><input type="text" id="ajaxBday"name="bday"><td>
<td><input type="text" id="ajaxAddress"name="address"><td>
<td>phone: </td>
<td><input type="text" id="ajaxPhone"name="phone"><td>
<td><input type="text" id="ajaxEmail"name="email"><td>


the problem is how to be able to click the retrieved names and place it in the forms...