javascript动态创建页面元素

最新推荐文章于 2024-07-26 11:09:07 发布

winson4282000

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量5.1k

点赞数

分类专栏： ajax 文章标签： javascript button table function input div

本文链接：https://blog.csdn.net/winson4282000/article/details/2100564

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>

<head>

<title></title>
<script language="javascript">
    function createDiv(){
        var chileE1 = document.createElement("div");

        var txtNode = document.createTextNode("winson");
        chileE1.appendChild(txtNode);
        //注意之里是document.body
        document.body.appendChild(chileE1);

    }

    function updateDiv(){

        var obj = document.getElementById("tt");
        var txtNode = document.createTextNode("ffff");
        tt.appendChild(txtNode);
    }

    /**使用dom动态创建元素，需要注意的是，tr元素不能直接使appendChild方法附
    加到table元素中。必须先用appendChild方法把tr元素附加到tbody元素中，再用
    appendChild方法把tbody附加到table元素中。否则的话，页面不报错，但table
    就是显示不出来
    */
    function createTab(){
        var eTab = document.createElement("table");
        eTab.border=1; //边框为1
        var eTbody = document.createElement("tbody");
        var eTr1 = document.createElement("tr");
        var eTr2 = document.createElement("tr");

        var eTd1 = document.createElement("td");
        var eTd2 = eTd1.cloneNode();//也可以使用克隆的方法
        var eTd3 = document.createElement("td");
        var eTd4 = document.createElement("td");
        var eTd5 = document.createElement("td");
        var eTd6 = document.createElement("td");

        var txtNode1 =document.createTextNode("1");
        var txtNode2 =txtNode1.cloneNode(); //也可以使用克隆的方法
        txtNode2.nodeValue = "dfdf"; //使用nodeValue重新赋值
        var txtNode3 =document.createTextNode("3");
        var txtNode4 =document.createTextNode("4");
        var txtNode5 =document.createTextNode("5");
        var txtNode6 =document.createTextNode("6");

        eTd1.appendChild(txtNode1);
        eTd2.appendChild(txtNode2);
        eTd3.appendChild(txtNode3);
        eTd4.appendChild(txtNode4);
        eTd5.appendChild(txtNode5);
        eTd6.appendChild(txtNode6);

        eTr1.appendChild(eTd1);
        eTr1.appendChild(eTd2);
        eTr1.appendChild(eTd3);

        eTr2.appendChild(eTd4);
        eTr2.appendChild(eTd5);
        eTr2.appendChild(eTd6);


        eTbody.appendChild(eTr1);
        eTbody.appendChild(eTr2);

        eTab.appendChild(eTbody);
        document.body.appendChild(eTab);


    }

    /*使用页面元素的innerHTML属性动态创建页面元素,而innerText是添加文本的时候使用的
    */
    function createByinnerHTML(){
        var obj = document.getElementById("tt");
        obj.innerHTML ="<table border='1'><tr><td>dfdf</td></tr></table>";
    }

</script>
</head>

</html>

winson4282000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript动态创建页面元素

function createDiv(){ var chileE1 = document.createElement("div"); var txtNode = document.createTextNode("winson"); chileE1.appendChild(txtNode); //注意之里是do
复制链接

扫一扫

专栏目录