JQuery替换DOM节点自身HTML

原理是使用JQuery访问outerHTML属性以达到最终效果。

示例中将input输入框被其name相同的select下拉框替换，其中select是事先在页面中并且display:none隐藏的。以下为代码：

<input type="text" name="user" />
<input type="text" name="pass" />
<select name="pass"  style="width: 150px;display:none;">
                    <option value="0">红色</option>
                    <option value="1">蓝色</option>
                    <option value="2">黄色
</option>
                </select>

$(function () {
        $("input:text").each(function (index, obj) {
            var obj = $("select[name=" + this.name + "]");
            if (obj.length != 0) {//找到对应的select标签
                $(this).prop("outerHTML", obj.prop("outerHTML"));//更改HTML
                obj.remove();//清除原DOM以免重复
                obj = $("select[name=" + this.name + "]");//重新查找对象
                obj.show();//显示
            }
        });
    })