1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > Js(DOM)动态添加节点和事件

Js(DOM)动态添加节点和事件

时间:2020-12-15 11:48:22

相关推荐

Js(DOM)动态添加节点和事件

<html>

<head>

<script language="javascript">

function addEl(){

//找到要添加节点的父节点(table)

var tb = document.getElementById("tb");

//创建tbody节点,表格中必须有tbody才能添加,直接添加tr不成功

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

//创建tr节点

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

//创建td节点

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

//添加一个文本框节点,设置id和type属性

var newTp = document.createElement("input");

newTp.id = "text1";

newTp.type = "text";

//添加一个按钮

var newEl = document.createElement("input");

newEl.type = 'button';

newEl.value = "button";

newEl.name = "button1";

//添加onclick事件,和事件执行的函数

newEl.onclick = function dofun(){

document.getElementById("txt").value += newTp.value;

}

//把2个节点添加到td当中

td.appendChild(newTp)

td.appendChild(newEl);

//把td添加到tr中

tr.appendChild(td);

//把tr添加到td中

tbody.appendChild(tr);

//把td添加到table中

tb.appendChild(tbody);

}

</script>

</head>

<body>

<table id="tb">

<tr>

<td>

添加节点的地方

</td>

</tr>

</table>

<table>

<tr>

<td>

<input type="button" value="添加节点" οnclick="addEl()" />

</td>

<td>

<input type="text" id="txt"/>

</td>

</tr>

</table>

</body>

</html>

只是简单写了一个例子,具体的按照自己的业务修改就可以了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。