Dom笔记6：Dom的动态创建

最新推荐文章于 2021-05-31 08:37:32 发布

zhanzkw

最新推荐文章于 2021-05-31 08:37:32 发布

阅读量645

点赞数

分类专栏： Dom 文章标签： button input function html 浏览器 ajax

本文链接：https://blog.csdn.net/studyalllife/article/details/6753161

版权

Dom 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Dom的动态创建在做AJAX效果的时候用的是非常多的。Dom的动态创建就是根据后台服务器返回的数据，动态的对页面进行修改。

1：document.write 只能在页面加载过程中才能动态创建。

2：可以调用 document 的 createElement 方法来创建具有指定标签的:DOM 对象，然后通过调用某个元素的 appendChild 方法将新创建元素添加到相应的元素下

   function showit() {
            var divMain = document.getElementById("divMain");//调用已经写好的DIV层
            var btn = document.createElement("input");//创建一个input标签
            btn.type = "button";                      //设置标签的type属性
            btn.value = " 我是动态的！ ";              //设置标签的value属性
            divMain.appendChild(btn);                  //把创建好并设置好的标签添加到层中
        }

<div id="divMain"></div>
<input type="button" value="ok" οnclick="showit()" />

3：innerText 、 innerHTML：这两个属性，在AJAX中用的很多。是重点

几乎所有 DOM 元素都有 innerText 、 innerHTML 属性（注意大小写），分别是素标签内：内容的文本表示形式和 HTML 源代码，这两个属性是可读可写的。

<a href="http://www.itcast.cn" id="link1"> 这 <font color="Red"> 是 </font>内容 </a>

innerText ：获取link1的内容的文本表示形式

<input type="button" value="innerText" οnclick="alert(document.getElementById('link1').innerText)" />

innerHTML：获取link1的HTML 源代码

<input type="button" value="innerHTML" οnclick="alert(document.getElementById('link1').innerHTML)" />

其实，取页面标签的值用的很少，一般都是为页面标签赋值：

如：原本标签为：

<a href="http://www.itcast.cn" id="link1"> 这 <font color="Red"> 是 </font>内容 </a>

修改前显示：

动态修改标签包含的内容：
代码：

<input type="button" value="修改标签包含内容" οnclick="document.getElementById('link1').innerText='至于你信不信，反正我信了！'" />

点击按钮修改后显示：

同理，也可以修改innerHTML。

<input type="button" value="修改标签包含的HTML" οnclick="document.getElementById('link1').innerHTML='这 <font color="Red"> 是 </font>内容'" />

同样，点击按钮为DIV层里面添加内容（添加一个按钮）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
   <script type="text/javascript">
   function createInput()
   {
        var divMain=document.getElementById("divMain");
        divMain.innerHTML="<input type='button' value='哼哼' />";
   }    
   </script>
</head>
<body>
<div id="divMain"></div>
<input id="Button1" type="button" value="动态往层里面写内容" οnclick="createInput()" />  
</body>
</html>

练习：点击按钮动态增加网站列表，分两列，第一列为网站的名字，第二列为带网站超链接的网站名。增加三行常见网站。

第一种方法：

这种方法由于浏览器兼容性问题，可能在某些浏览器中执行不成功（主要是对createElement()和appendChild()函数不支持）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
   <script type="text/javascript">
   function LoadData()
   {
        var data={"百度":"http://baidu.com","凤凰":"http://ifeng.com","谷歌":"http://google.com"};//格式：“key”：“value”
        var tablelinks=document.getElementById("tablelinks");
        
        for(var key in data)
        {
            var value=data[key];//同过数据data的key读取他的value数据
            var tr=document.createElement("tr");
           
             
            var td1=document.createElement("td");
            td1.innerText =key;
            tr.appendChild(td1);
              
            var td2=document.createElement("td");
            td2.innerHTML="<a href='"+value+"'>"+value+"</a>";
            tr.appendChild(td2);
            
            tablelinks.appendChild(tr); 
        }
        
   }    
   </script>
</head>
<body>
<table id="tablelinks"></table>
<input id="Button1" type="button" value="加载数据" οnclick="LoadData()" />  
</body>
</html>

第二种方法：这种方法不存在浏览器兼容问题

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
   <script type="text/javascript">
   function LoadData()
   {
        var data={"百度":"http://baidu.com","凤凰":"http://ifeng.com","谷歌":"http://google.com"};
        var tablelinks=document.getElementById("tablelinks");
        
        for(var key in data)
        {
            var value=data[key];
            var tr=tablelinks.insertRow(-1);
           
             
            var td1=tr.insertCell(-1);//-1表示最后，在最后的位置添加一个单元格

            td1.innerText =key;
            
            
            var td2=tr.insertCell(-1);              
            td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";

        }
        
   }    
   </script>
</head>
<body>
<table id="tablelinks"></table>
<input id="Button1" type="button" value="加载数据" οnclick="LoadData()" />  
</body>
</html>

练习：无刷新评论

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script type="text/javascript">
    function AddComment()
    {
        var nickname=document.getElementById("nickname").value;
        var comment=document.getElementById("comment").value;
        
        var tablecomment=document.getElementById("tablecomment");
        var tr=document.createElement("tr");
        
        
        var tdnickname=document.createElement("td");
        tdnickname.innerText=nickname;
        tr.appendChild(tdnickname);
        
        var tdcomment=document.createElement("td");
        tdcomment.innerText=comment;
        tr.appendChild(tdcomment);
        
        
        tablecomment.tBodies[0].appendChild(tr);
   
    }
    
    
    </script>
</head>
<body>

    <table id="tablecomment">
        <tr>
            <td >
                昵称：</td>
            <td>
                <input id="nickname" type="text" /></td>
        </tr>
        <tr>
            <td >
                评论：</td>
            <td>
                <input id="comment" type="text" /></td>
        </tr>
        <tr>
            <td>
                <input id="Button1" type="button" value="评论" οnclick="AddComment()"/></td>
        </tr>
    </table>

</body>
</html>

运行：

zhanzkw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom笔记6：Dom的动态创建

Dom的动态创建在做AJAX效果的时候用的是非常多的。Dom的动态创建就是根据后台服务器返回的数据，动态的对页面进行修改。1：document.write 只能在页面加载过程中才能动态创建。2：可以调用 document 的 createElement
复制链接

扫一扫