JQuery - замените кнопку HTML на <li>, сохраняя значения в неизменном виде

Question

У меня есть страница с кнопками:

<input type="button" alue="TEST" 
style="height:40px;width:120px;"
 onClick="javascript:window.location='page.html';" /> 

Я хочу преобразовать его в (webui):

<li><a href="page.html">TEST</a></li>

Это код, который у меня есть: (похоже, не работает)

  $('<input type="button" value=').replaceWith('<li>');
    $('onClick="javascript:window.location=').replaceWith('<a href="');
     $('';" />').replaceWith('" target="_self"></a></li>"');

Answer 1

Или в более общем виде:

$("input[type='button']").replaceWith(function() {
   var $button = $(this);
   var $result = $("<a></a>");
   var target = $button.attr("onClick");
   target = target.substr(target.indexOf('\''));
   target = target.substr(0, target.length - 2);
   $result.attr("href", target);
   $result.text($button.val());
   $result = $("<li></li>").append($result);
   return $result;
});

Живой пример: http://jsfiddle.net/ERLgR/1/

Answer 2

Это, как правило, плохая идея, но, в любом случае, вот ответ?

var elm = $('input[type="button"]'),
    alue = elm.attr('alue'),
    page = elm.attr('onClick').split("'")[1],
    elm2 = '<li><a href="'+page+'">'+alue+'</a></li>';
elm.replaceWith(elm2)​;​​​​​​​​​​​​​

FIDDLE

Answer 3

Вы пытаетесь заменить строку на объектах jQuery, это не так. Вы могли бы сделать это:

$(':button[value="TEST"]').replaceWith($('<li><a href="page.html">TEST</a></li>​​​​'));​

Кроме того, как добавил Томалак в комментариях, лучше всего было бы изменить его непосредственно в HTML вместо использования javascript.