1. 程式人生 > >原生JS改變HTML內容

原生JS改變HTML內容

最近發現總是把原生JS語法和諸多框架庫神馬的語法搞混,打算暫時棄用各種庫,迴歸到原生來,好好摳一摳所有的細節,跳一跳各種坑,才能飛得更遠。PS. 突然想起冰火裡面三眼烏鴉對布蘭說的那句話——You’ll never walk………but you’ll fly. 期待看到布蘭變龍(maybe)飛起來的那天~~~

well,快點回神!

改變 HTML 輸出流

JavaScript 能夠建立動態的 HTML 內容:
在 JavaScript 中,document.write() 可用於直接向 HTML 輸出流寫內容。
提示:絕不要使用在文件載入之後使用 document.write()。這會覆蓋該文件。

改變 HTML 內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容,請使用這個語法:

document.getElementById(id).innerHTML=new HTML

改變 HTML 屬性

如需改變 HTML 元素的屬性,請使用這個語法:

document.getElementById(id).attribute=new value

幾個容易混淆的用法:

1、innerHtml是標籤內的文字,輸入輸出到該DOM內部純HTML程式碼(流);
(獲得td、div等html元素時候,它們是沒有value或是text屬性,只能用innerHtml)

2、value是表單元素特有的屬性,輸入輸出的是轉義文字(字串);
(Button、CheckBox、Radio)隨表單一起傳送的值;
(Reset、Submit)標籤;
(Text、Hidden)預設值;
(File、Password)
(注: Text控制元件用value有效)

3、htmltext都是jquery/zepto的方法,只對jq物件有用