1、获取div节点
var div = document.getElementById('divid')//获取一个id是divid的div节点，往这个节点中添加p节点2、动态生成p节点
var p = document.createElement('p')//创建p节点p.innerHTML = '显示的文字'//p节点显示的文字
3、往div中通过appendChild添加p节点
div.appendChild(p)//往div中添加p节点js动态添加数组可以按下面的步骤:
1、在数组的开头添加新元素 - unshift()
源代码:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add elements to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"]
fruits.unshift("Lemon","Pineapple")
var x=document.getElementById("demo")
x.innerHTML=fruits
}
</script>
<p><b>Note:</b>The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be <em>undefined</em>.</p>
</body>
</html>
测试结果:
Lemon,Pineapple,Banana,Orange,Apple,Mango
2、在数组的第2位置添加一个元素 - splice()
源代码:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add elements to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"]
fruits.splice(2,0,"Lemon","Kiwi")
var x=document.getElementById("demo")
x.innerHTML=fruits
}
</script>
</body>
</html>
测试结果:
Banana,Orange,Lemon,Kiwi,Apple,Mango
3、数组的末尾添加新的元素 - push()
源代码:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add a new element to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"]
function myFunction()
{
fruits.push("Kiwi")
var x=document.getElementById("demo")
x.innerHTML=fruits
}
</script>
</body>
</html>
测试结果:
Banana,Orange,Apple,Mango,Kiwi
关于你的提问，我通过添加一个Input标签实现的，代码如下：<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function keydownAddP(evt) { // 当input标签接收到回车时，执行本方法
evt = (evt) ? evt : ((window.event) ? window.event : "")
keyCode = evt.keyCode ? evt.keyCode : (evt.which ? evt.which : evt.charCode)
if (keyCode == 13) {
//创建一个P标签
var newP = document.createElement('p')
newP.innerHTML = "新的P标签"
//添加新P标签
var con = document.getElementById('con')
con.appendChild(newP)
}
}
</script>
</head>
<body>
<input onkeydown="keydownAddP(event)" type="text" />
<hr />
<div id="con" style="border:1px solid redwidth:500pxheight:300px">
<p>原来的P标签</p>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）