var plane = document.getElementById('list');

var sep = plane.appendChild(document.createElement('br'));

var add = plane.appendChild(document.createElement('li'));
add.innerHTML = '<u><a href="#" onclick="return false">click to add new item</a></u>';
add.value = '99';

add.onclick = function() {
  var item = plane.insertBefore(document.createElement('li'), sep);
  var html = item.appendChild(document.createElement('span'));
  var edit = item.appendChild(document.createElement('input'));
  var dele = item.appendChild(document.createElement('img'));

  edit.type          = 'text';
  edit.value         = 'click to edit';
  edit.maxLength     = 100;
  edit.size          = 100;
  dele.src           = 'dele.gif';
  dele.style.display = edit.style.display = 'none';

  item.onclick = function() {
    html.style.display = 'none';
    dele.style.display = edit.style.display = 'inline';

    edit.focus();
  };

  edit.onblur = function() {
    var t = edit.value;
    t = t.replace(/!(.+)!/g, '<i>$1</i>');
    t = t.replace(/\*(.+)\*/g, '<strong>$1</strong>');
    html.innerHTML = t;
  
    html.style.display = 'inline';
    dele.style.display = edit.style.display = 'none';
  }

  edit.onkeydown = function(e) {
    var key = 0;
    if (window.event) {
      key = window.event.keyCode;
    } else if (e) {
      key = e.keyCode; // e.which
    }

    if (key == 13) {
      edit.onblur();
    }
  }

  dele.onmousedown = function() {
    if (confirm('are you sure?')) {
      plane.removeChild(item);
    }
  }

  edit.onblur();
}