js怎樣修改html元素的內容？本章就給大家介紹在js中利用HTML DOM是怎樣修改html元素內容的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

首先我們要了解HTML DOM是什么？HTML DOM的作用是什么？

HTML DOM ，文檔對象模型(Document Object Model)的簡稱，當網頁被加載時，瀏覽器就會創建頁面的文檔對象模型。

HTML DOM 模型可以被構造為對象的樹。如下圖：

通過 HTML DOM，可訪問 JavaScript HTML 文檔中的所有元素，可以獲得了足夠的能力來創建動態的 HTML。通過 HTML DOM，JavaScript可以實現如下的功能：

js 能夠修改頁面中的所有 HTML 元素；

js 能夠修改頁面中的所有 HTML 屬性；

js 能夠修改頁面中的所有 CSS 樣式；

js 能夠對頁面中的所有事件做出反應。

下面我們就來具體介紹一下通過 HTML DOM，js是怎樣修改html元素的內容：

1、js修改添加html內容

js 能夠創建添加動態的 HTML 內容，使用write()方法就可直接向 HTML 向文檔寫入 HTML 表達式或 JavaScript 代碼。

write()方法內可列出多個參數(exp1,exp2,exp3,...) ，它們將按順序被追加到文檔中。

語法：document.write(exp1,exp2,exp3,....)

說明：

雖然根據 DOM 標準，write()方法只接受單個字符串作為參數。但，write() 可接受任意多個參數。

我們通常按照以下兩種的方式使用 write() 方法：

1、在使用該方在文檔中輸出 HTML

2、在調用該方法的的窗口之外的窗口、框架中產生新文檔。注意：在此種方式中，請務必使用 close() 方法來關閉文檔。

實例：

document.write("

Hello World!

","現在是：",Date());

效果圖：

2、js修改替換htnl元素的內容

js修改替換 html元素 內容的最簡單、直接的方法就是使用 innerHTML 屬性。

語法：document.getElementById(id).innerHTML=new HTML

document.getElementById(id)是通過id查找并獲得需要修改替換內容的 HTML元素，然后使用innerHTML 屬性修改替換html元素的內容。

實例(改變了

元素的內容)：

Old Header

var element=document.getElementById("header");

element.innerHTML="New Header";

"Old Header" 已被修改為 "New Header"。

效果圖：

說明：

例子中的 HTML 文檔包含有 id="header" 的

元素；

我們使用 HTML DOM 來查找并獲得 id="header" 的

元素；

在使用innerHTML屬性就可修好替換html元素

里的全部內容 。

總結：以上就是本篇文的全部內容，希望能對大家的學習有所幫助。更多相關教程請訪問JavaScript視頻教程！

相關推薦：

總結

以上是生活随笔為你收集整理的php修改js内容,js怎样修改html元素的内容？HTML DOM实现修改内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。