javascript添加一個段落的方法:1、通過“document.write”方法插入html段落;2、通過DOM方法插入html段落。
本文操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版,DELL G3電腦
javascript如何添加一個段落?
javaScript插入html段落方法
傳統(tǒng)方法:
document.write方法
可以直接在需要插入的地方通過script標簽插入
<body> <script> document.write("<p>This is inserted.</p>"); </script> </body>
或者挪到外部函數(shù)中
<body> <script> insertParagraph("This is inserted"); </script> ... <script> function insertParagraph(text){ var str = "<p>"+text+"</p>" document.write(str) } </script> </body>
但是怎樣都會使JavaScript代碼和HTML代碼混雜在一起,不是一種好的做法。
innerHTML屬性
innerHTML即可以寫入html代碼,也可以讀出所選節(jié)點下的html代碼。通過innerHTML插入是直接替換掉了所選節(jié)點下面的全部內(nèi)容。
<div id="insert"> <p>This will be overwritten.</p> </div> <script> window.onload = function(){ var insertDiv = document.getElementById("insert") alert(insertDiv.innerHTML) insertDiv.innerHTML = "<p>This is inserted.</p>" } </script>
DOM方法
createElement方法:document.createElement(nodeName)
創(chuàng)建一個新元素,下面的代碼就是創(chuàng)建了一個p元素。
var insertElement = document.createElement("p") appendChild方法:parent.appendChild(child)
讓此節(jié)點成為目標節(jié)點的子節(jié)點
var insertElement = document.createElement("p"); document.getElementById("insert").appendChild(insertElement); creatTextNode方法:document.createTextNode(text);
和createElement方法類似,但是創(chuàng)建的是一個文本節(jié)點
var txt = document.createTextNode("New insert text."); insertElement.appendChild(txt); insertBefore方法: parentElement.insertBefore(newElement,targetElement);
將一個新元素插到一個現(xiàn)有元素的前面。其中parentElement是目標元素的父元素,newElement是你想插入的元素,targetElement你想插入到它前面的元素。
var newInsertElement = document.createElement("p"); insertDiv.insertBefore(newInsertElement,insertDiv);
推薦學習:《javascript高級教程》