JS趴趴往上走-插入HTML標籤的兩種方式
innerHTML innerHTML可以設定HTML中的元素,也可以單純的字串寫入HTML中的某一部分,傳進語法進行渲染,是用來設計與網友互動的網頁特效方法 請先新增HTML再新增Javascript看效果哦! 範例:跟改文字 //html <p class="text"></p> //Javascript //定義p var pt=document.querySelector('.text'); //更換文字 pt.innerHTML="我變更了!"; 範例:內部新增元素 //html <ul class="text"></ul> //Javascript //定義ul var ult=document.querySelector('.text'); //新增元素 ult.innerHTML="<li>我是清單</li>"; 優點:效能快 缺點:資安風險,要確保來源沒問題 差異:是一次性渲染,會把前面資料給覆蓋過去 Document.createElement() 創建一個新元素,以DOM節點來處理 語法: var element = document.createElement(創建元素); 範例: //html <ul class="text"></ul> //Javascript //創建li元素 var str=document.createElement('li'); //新增文字 str.textContent="新增清單!"; //在.text下新增子節點(str) document.querySelector('.text').appendChild(str); 優點:安全性高 缺點:效能差 差異:產生的結果會繼續接在原本有的元素後面,不像 innerHTML 會重新覆蓋