DOM要素を変更するにはどうすればよいですか？

Question

<option>タグをすべて<a>タグに変更するにはjavascriptを使用したいと思います。私はすべての属性を同じにしておきたい。私は単に、それがどんなタイプのタグであるかを切り替えたいだけです。

このアイデアでいくつかのバリエーションを試しましたが、役に立たないです。

$.each (array_of_options, function (i, v) { 
    v.replace(/option/i, "a"); 
}); 

しかし、これはエラーを返すだけです。

Answer 1

一つのオプション：

$('option').each(
    function(){ 
     var that = $(this); 
     $('<a />') 
      .text(that.text()) 
      .attr('href','#' + that.val() + '.html') 
      .appendTo($('body')); 
     that.remove(); 
    }); 

JS Fiddle demo。

それとも、あなたはプレーンなJavaScriptを使用することができます

var sel = document.getElementById('select'), 
    opts = sel.getElementsByTagName('option'), 
    b = document.getElementsByTagName('body')[0]; 

for (var i=0,len=opts.length;i<len;i++){ 
    var a = document.createElement('a'); 
    a.href = '#' + opts[i].value + '.html'; 
    a.innerHTML = opts[i].innerHTML; 
    b.appendChild(a); 
} 

JS Fiddle demoを。

Answer 2

私はこのための迅速jsFiddleを作成しました：http://jsfiddle.net/KkGUt/

これは、新しいタグを作成し、テキストの上にコピーし、属性を超えるコピーは、その後、元のタグに置き換えられます。

コード：

$(function() { 
    $('option').each(function() { 
     var $old = $(this), 
      $new = $(document.createElement('a')), 
      attrs = $old.get(0).attributes; 
     //-- copy text from option 
     $new.text($old.text()); 
     //-- copy over attributes 
     for (var i = 0, len = attrs.length; i < len; i++) { 
      $new.attr(attrs[ i ].name, attrs[ i ].nodeValue); 
     } 
     //-- replace $old with $new 
     $old.replaceWith($new); 
    }); 
    console.log($('form')); 
});​