JavaScript菜鳥教程

JavaScript 對(duì)象

JavaScript 函數(shù)

JS HTML DOM

JS DOM Navigation

JS 瀏覽器BOM

AJAX 菜鳥教程

JavaScript 參考手冊(cè)

JS DOM 改變CSS JS HTML DOM選擇器

JS DOM 改變HTML內(nèi)容

HTML DOM允許JavaScript獲取和更改HTML元素的內(nèi)容。

更改HTML內(nèi)容

更改HTML元素內(nèi)容的最簡(jiǎn)單方法是使用innerHTML屬性。

要更改HTML元素的內(nèi)容，請(qǐng)使用以下語(yǔ)法：

element.innerHTML = text

以下示例使用id="para" 更改<p>元素的內(nèi)容：

示例

<!DOCTYPE html>
<html>


<p id="para"></p>

<script>
document.getElementById("para").innerHTML = "Hello world";
</script>


</html>

測(cè)試看看?/?

下面的示例獲取id="para"的<p>元素的內(nèi)容：

示例

<!DOCTYPE html>
<html>


<p id="para">This is a paragraph.</p>
<p id="result"></p>

<script>
var x = document.getElementById("para").innerHTML;
document.getElementById("result").innerHTML = x;
</script>


</html>

測(cè)試看看?/?

改變輸出流

document.write()方法將文本字符串寫入文檔流。

示例

<!DOCTYPE html>
<html>
<p>document.write()方法將文本字符串寫入文檔輸出流:</p>
<script>
document.write(new Date());
</script>
</html>

測(cè)試看看?/?

此方法僅在解析該文檔時(shí)將內(nèi)容寫入當(dāng)前文檔。

如果在頁(yè)面加載后使用此方法，它將覆蓋該文檔中的所有現(xiàn)有內(nèi)容。

示例

<button onclick="myFunc()">Click me</button>

<script>
function myFunc() {
  document.write(new Date());
}
</script>

測(cè)試看看?/?

更改屬性的值

要更改HTML屬性的值，請(qǐng)使用以下語(yǔ)法：

element.attribute = new value

下面的示例更改<img>元素的src屬性的值：

單擊按鈕更改頭像：

下面的示例獲取錨元素的href屬性的值：

示例

var x = document.getElementById("demo").href;

測(cè)試看看?/?

向DOM添加新元素

您可以使用document.createElement()方法在HTML文檔中顯式創(chuàng)建新元素。

此方法創(chuàng)建一個(gè)新元素，但不會(huì)將其添加到DOM中。您必須在一個(gè)單獨(dú)的步驟中執(zhí)行此操作：

  // 創(chuàng)建一個(gè)新的h3元素
  var newElem = document.createElement("h3");
  // 并給它一些內(nèi)容
  var newContent = document.createTextNode("嗨，大家好!");

appendChild()方法將新元素添加到指定父節(jié)點(diǎn)的任何其他子節(jié)點(diǎn)的末尾。

示例

// 將文本節(jié)點(diǎn)添加到新創(chuàng)建的h3
newElem.appendChild(newContent);  

// 將新創(chuàng)建的元素及其內(nèi)容添加到DOM中
document.body.appendChild(newElem);

測(cè)試看看?/?

但是，如果要在其他任何子項(xiàng)的開頭添加新元素，則可以使用該insertBefore()方法。

示例

//創(chuàng)建一個(gè)新的h3元素
var newElem = document.createElement("h3");
// 給它一些內(nèi)容
var newContent = document.createTextNode("Hi there and greetings!");
// 將文本節(jié)點(diǎn)添加到新創(chuàng)建的h3
newElem.appendChild(newContent);  

// Get the Body
var body = document.body;
// Insert H3 before the first child of the BODY
body.insertBefore(newElem, body.childNodes[0]);

測(cè)試看看?/?

從DOM中刪除現(xiàn)有元素

同樣，您可以使用該removeChild()方法從DOM中刪除子節(jié)點(diǎn)。

示例

var div = document.getElementById("demo");
div.removeChild(div.firstElementChild);

測(cè)試看看?/?

JS DOM 改變CSS JS HTML DOM選擇器