javascript - 如何更改 DOM 元素？

Question

我想使用 javascript 将所有<option>标签更改为<a>标签。我希望所有属性保持不变。我只是想切换它是什么类型的标签。

我尝试对这个想法做了几个变化，但无济于事。

$.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 小提琴演示。

或者，您可以使用纯 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' ) );
} );​