如何用js在页面中添加元素？_IT百科

1首先创建html结构，如下图所示，一个input元素，一个按钮，一个空的ul列表。

2然后添加按钮点击事件，如下图所示，在按钮点击事件中获得input元素。

3通过value属性我们可以获得用户在input中输入的内容，如下图所示。

4下面我们来动态创建一个li元素，如下图所示，运用document中的createElement方法即可。

5创建好li元素以后，下面要做的就是给其设置innerHTML内容，如下图所示。

6接下来就是获取ul元素了，如下图所示，仍然用getElementById方法。

7最后通过调用appendChild方法将创建的li元素添加到ul列表中，如下图所示。

1、js添加节点：documentbodyappendChild(documentcreateTextNode在写出想要添加的即可。

2、js移除节点：varccn=documentgetElementById("sd")childNodes[0];//填写要移除的节点。

3、js移动节点：编写varsdds=documentgetElementById("sd")即可移动。

4、js复制节点：documentgetElementsByTagName("p");//即可复制。

5、js创建节点：documentcreateTextNode("sss")//即可进行创建。

$(document)ready(function(){

$(yournode)each(function(){

$(this)html(your node html);

});

通过把页面上已有的表格dom节点传入（也可以动态js生成），直接返回一个workbook对象

把页面上已有的表格dom节点传入（也可以动态js生成），直接返回一个worksheet对象

给worksheet对象追加一个表格dom

通过json数据转成一个worksheet对象

添加节点append；移除节点removeChild；移动节点：var sdds=documentgetElementById；创建节点createTextNode()；查找节点：documentgetElementsByTagName。

其他方法：

创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

查找

getElementsByTagName() //通过标签名

称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

实现一个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

给你个思路，监听“加号”的点击事件，当用户点击了“加号”以后显示一个div（此div开始时是隐藏状态）然后根据用户的选择在“我的应用”div里以子节点的方式添加一个相应标签。大概就是这个思路，实现起来应该不复杂。希望对你有帮助

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 10 Strict//EN"

"http://wwww3org/TR/xhtml1/DTD/xhtml1-strictdtd">

<html>

<head>

function addrow(){//添加行

var tb = documentgetElementById("tid");//获取表格元素

tds =tbgetElementsByTagName("tr")[0]getElementsByTagName("td");//获取表格中行的列数

var tr1 = documentcreateElement("tr")//创建行

for(var i=0;i<tdslength;i++){//创建行中的列

var td1 = documentcreateElement("td");//创建列

var tx1 = documentcreateTextNode("行"+(tbgetElementsByTagName("tr")length+1)+"列"+(i+1));//创建列中文本元素

td1appendChild(tx1);//将文本元素添加到列中

tr1appendChild(td1);//将列元素添加到行中

}

tbappendChild(tr1);//将行添加到表格中

tbinsertBefore(tr1,tbgetElementsByTagName("tr")[1]);

}

function addcol(){//添加列

var tb = documentgetElementById("tid");//获取表格元素

trs =tbgetElementsByTagName("tr");//获取表格中的所有行

for(i=0;i<trslength;i++){//为每一行添加一列

var tri = trs[i];

var td1 = documentcreateElement("td");//创建列元素

var tx1 = documentcreateTextNode("行"+(i+1)+"列"+(trigetElementsByTagName("td")length+1));

td1appendChild(tx1);//将文本元素添加到列元素中

triappendChild(td1);//将列元素添加到行中

}

</script>

</head>

<body>

<form >

</form>

</table>

</body>

</html>

这是一个简单的通过将表格看成一棵树的写法

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/bake/13494866.html

如何用js在页面中添加元素？

发表评论

评论列表（0条）