Dom笔记6：Dom的动态创建

来源：互联网发布：简易计算器java代码编辑：程序博客网时间：2024/05/09 05:26

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" onclick="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" onclick="alert(document.getElementById('link1').innerText)" />

innerHTML：获取link1的HTML 源代码

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

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

如：原本标签为：

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

修改前显示：

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

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

点击按钮修改后显示：

同理，也可以修改innerHTML。

<input type="button" value="修改标签包含的HTML" onclick="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="动态往层里面写内容" onclick="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="加载数据" onclick="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="加载数据" onclick="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="评论" onclick="AddComment()"/></td>        </tr>    </table></body></html>

运行：