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會重新覆蓋