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

Question

<option>javascriptを使用して、すべてのタグをタグに変更したいと思い<a>ます。すべての属性を同じままにしておきたい。タグの種類を切り替えたいだけです。

私はこのアイデアにいくつかのバリエーションを試してみましたが、役に立ちませんでした。

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

しかし、これはエラー以外の何も返しませんでした。

Answer 1

1つのオプション：

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

JSフィドルデモ。

または、プレーン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フィドルデモ。

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' ) );
} );​