type=email前前后后渲染变化测试实例页面

CSS代码：

input[type=email] {
    padding: 4px 2px 4px 25px;
    border: 1px solid #aaa;
    background: #fff url(http://mat1.gtimg.com/www/mb/images/face/72.gif) no-repeat left center;
}
.result {
    margin-left: 20px;
    color: #f30;
}					
                

HTML代码：

测试email类型框：<input type="email" id="email" />
<p><button id="outerHTML">outerHTML</button><span id="resultOuterHTML" class="result"></span></p>
<p><button id="getAttribute">getAttribute("type")</button><span id="resultType" class="result"></span></p>
                

JS代码：

var eleEmail = document.getElementById("email");
$("#outerHTML").bind("click", function() {
    $("#resultOuterHTML").html(email.outerHTML.replace(/</g, "&lt;"));	
});
$("#getAttribute").bind("click", function() {
    $("#resultType").html(email.getAttribute("type"));	
});