Javascript动态创建标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Javascript动态创建标签</title>
</head>
<body>
    <div id="divMian"></div>
    <input type="button" value="创建" onclick="btnClick()"/>
    <a href="http://www.baidu.com" id="abaidu" onclick="aClick()"><font color="red">百</font>度</a>
</body>
</html>
<script type="text/javascript" language="javascript">
    function aClick() {
        alert(document.getElementById("abaidu").innerText);//百度  弹出没有html代码的文本
        alert(document.getElementById("abaidu").innerHTML); //<font color="red">百</font>度   弹出包含html的文本
     }
    function btnClick() {
        var divMian = document.getElementById("divMian");
//        var input = document.createElement("input");
        //        input.type = "button";
        //input.value = "我是动态添加的按钮";
        //将动态产生的元素添加到div中
        //divMian.appendChild(input);
//        var input = document.createElement("a");
//        input.href = "http://www.baidu.com";
//        input.innerText = "百度";
        //        divMian.appendChild(input);
        divMian.innerHTML = "<input type='button' value='按钮'/>";//只是修改div的html  不会出现无数个按钮，只有一个
     }
</script>

posted @ 2013-04-21 21:18  ipangjie  阅读(212)  评论(0)    收藏  举报