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
可以直接用document.getElementById("divid").innerHTML = "<p>内容</p>"的方式来写。
多个可以循环进行处理。
假设段落文本是个数组：array。
可以通过for (var i = 0i <array.lengthi++) {document.getElementById("divid").innerHTML = "<p>"+array[i]+"</p>"}的方式进行处理。
延展：
如果段落过多,直接使用 div.appendChild方法会不段刷新DIV对象,影响运行速度。
正确的方法应该使用 document对象的碎片方法。
document.createDocumentFragment 容器,最后再将这些碎片返回给DIV对象比较合理，例如:
var strArrayList=[]// 创建一个段落文本数组对象，这些段落文本可能是100个也可能是1000个。
strArrayList[0]='数据111.......'
strArrayList[1]='数据.......'
strArrayList[2]='数据.......'
strArrayList[3]='数据.......'
strArrayList[4]='数据.......'
//...数据n.....
var div=document.getElementById('div1')//获得DIV对象。
var f=document.createDocumentFragment()//创建碎片对象。
for(var i=0i<strArrayList.lengthi++){
var p=document.createElement('P')//动态创建P标签。
p.appendChild(document.createTextNode(strArrayList[i]))//段落字符串。
f.appendChild(p)//附加到碎片对象中。
}
div.appendChild(f)//最后返给DIV对象。
如果需要用原生js动态的加载另外一个js文件，可以使用原生js的document.createElement方法创建script节点，然后更改该节点的type和src属性,最后通过appendChild方法将该节点动态添加到html中，这样就可以了，参考代码如下：var new_element = document.createElement("script")//创建新的script节点new_element.setAttribute("type", "text/javascript")new_element.setAttribute("src", "../js/jquery.js")document.body.appendChild(new_element)//添加到body节点的末尾
上例中是在body的最末尾添加的，当然同样可以在head中添加引用该js的标签：document.head.appendChild(new_element)
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）