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="添加节点" onclick="addEl()" />
</td>
<td>
<input type="text" id="txt"/>
</td>
</tr>
</table>
</body>
</html>
第一种1
2
3
4
5
6
7
function
insertEle()
{
var
oTest
=
document.getElementById("box-one")
var
newNode
=
document.createElement("div")
var
reforeNode
=
document.getElementById("p1")
newNode.innerHTML
=
"
This
is
a
newcon
"
oTest.insertBefore(newNode,reforeNode.nextSibling)//新建的元素节点插入id为P1节点元素的后面。
}
第二种
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//
自定义函数向后插入
function
insertAfter(
newElement,
targetElement)
{
var
parent
=
targetElement.parentNode
if
(
parent.lastChild
==
targetElement
)
{
//
如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.a(
newElement
)
}
else
{
//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面
parent.insertBefore(
newElement,
targetElement.nextSibling
)
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）