Js 操作DIV的一些问题！

downloadwz 2008-06-25 11:08:27

需要给DIV 里面插入东西。具体是怎么个做法？

要例子！！！

不是插入数字啦字母之类的，是插入一个table

...全文

120 19 打赏收藏转发到动态举报

写回复

用AI写文章

19 条回复

切换为时间正序

请发表友善的回复…

发表回复

yeak2001 2008-06-26

打赏
举报

插入表多的话还是用innerhtml比较好，如果只有几行表格也可以用创建节点的办法
个人觉得innerhtml比较直观

vary25 2008-06-26

打赏
举报

学习中%

wfyfngu 2008-06-25

打赏
举报

[Quote=引用 8 楼 xuzicn 的回复:]
innerHTML无疑是最好的，append多了自己都看不清楚
[/Quote]

innerHTML无疑是最不好的

wfyfngu 2008-06-25

打赏
举报

var table = document.createElement('table');
var div = document.getElementById('YOUR_DIV_ID_HERE');

div.appendChild(table);

xuzicn 2008-06-25

打赏
举报

innerHTML无疑是最好的，append多了自己都看不清楚

downloadwz 2008-06-25

打赏
举报

三颗星啊 ~~~

楼上的好牛~~

lovefootball 2008-06-25

打赏
举报



// 创建一个<table>元素和一个<tbody>元素

var table1 = document.createElement("table");

var mytablebody = document.createElement("tbody");

//创建所有的单元格

var myArray = new Array('this','is','a','test');

var currenttext = "";

for(var j = 0; j <4; j++) 

{

    // 创建一个<tr>元素

    var mycurrent_row = document.createElement("tr");

    for(var i = 0; i <4; i++) 

    {

        // 创建一个<td>元素--列

        var mycurrent_cell = document.createElement("td");

        //创建一个文本节点

        if(j==0)

        {

            currenttext = document.createTextNode(myArray[i]);

        }

        else if(i==0)

        {

            currenttext = document.createTextNode(myArray[j]);

        }

        else 

        {

            currenttext = document.createTextNode();

        }

        mycurrent_cell.appendChild(currenttext);

        // 将列<td>添加到行<tr>

        mycurrent_row.appendChild(mycurrent_cell);

    }

    // 将行<tr>添加到<tbody>

    mytablebody.appendChild(mycurrent_row);

}

// 将<tbody>添加到<table>

table1.appendChild(mytablebody); 

div.appendChild(table1);

大致代码就是这样
太麻烦~~~~~

lovefootball 2008-06-25

打赏
举报

APPENDCHILD是DOM的操作方式
个人觉得太麻烦，呵呵
不如直接拼字符串来的直接
而且如果节点过多
比如超过1000个
DOM的速度明显会慢

vfan2010 2008-06-25

打赏
举报

var div = document.getElementById("你的DIV的ID");
div.innerHTML = " <table><TR><TD></TD></TR></table>";
方法多得很，只是这种比较直接。

alucart11 2008-06-25

打赏
举报

div中是不能存在标签的。

downloadwz 2008-06-25

打赏
举报

好像是 APPENDCHILD啊

仅仅是好像。。。我也不会

lovefootball 2008-06-25

打赏
举报

var div = document.getElementById("你的DIV的ID");
div.innerHTML = "<table></table>";

volezbin 2008-06-25

打赏
举报

[Quote=引用 12 楼 downloadwz 的回复:]
{ alert("a");
var InsertTable=document.createElement(" <table>aaaa </table>");
alert("b");
InsertTable.insertRow().insertCell.insertText="aaaaaaaaaaaaaaaaaaaa";
alert("c");
alert(InsertTable.tagName);
alert("d");
document.getElementById("imgContainer").appendChild(InsertTable);
alert("e");

为什么这个不对呢？？？
[/Quote]

.createElement() ---------是用来创建元素节点,而不是插入插入字符,建议你把它和innerHTML搞清楚了先
InsertTable.insertRow().insertCell.insertText ---------你这算是给方法的方法赋于新的方法么?

guojh021 2008-06-25

打赏
举报

[Quote=引用 1 楼 lovefootball 的回复:]
var div = document.getElementById("你的DIV的ID");
div.innerHTML = " <table> </table>";
[/Quote]

volezbin 2008-06-25

打赏
举报

[Quote=引用 10 楼 wfyfngu 的回复:]
引用 8 楼 xuzicn 的回复:
innerHTML无疑是最好的，append多了自己都看不清楚

innerHTML无疑是最不好的
[/Quote]

那把innerHTML删掉吧,都用节点法好了................

lovefootball 2008-06-25

打赏
举报

参考如下代码



<html>

<script>

function test()

{

    var table = document.createElement("table");

    var row = document.createElement("tr");

    var cell = document.createElement("td");	

    var text = document.createTextNode("aaaaaaaaaaaaaaaaaaaa");

    cell.appendChild(text);

    row.appendChild(cell);

    table.appendChild(row);

    document.getElementById("testdiv").appendChild(table);

}

</script>

<div id="testdiv"></div>

<input type="button" value="btn" onclick="test()" />

</html>

lovefootball 2008-06-25

打赏
举报

[Quote=引用 10 楼 wfyfngu 的回复:]

innerHTML无疑是最不好的
[/Quote]

这个分环境的吧
如果你的Table足够大
不用太多，1000行
你用DOM操作？？？
你可否测试过效率

downloadwz 2008-06-25

打赏
举报

{ alert("a");
var InsertTable=document.createElement("<table>aaaa</table>");
alert("b");
InsertTable.insertRow().insertCell.insertText="aaaaaaaaaaaaaaaaaaaa";
alert("c");
alert(InsertTable.tagName);
alert("d");
document.getElementById("imgContainer").appendChild(InsertTable);
alert("e");

为什么这个不对呢？？？

xuzicn 2008-06-25