[DOM]-5.插入HTML標籤的方法

-
用JavaScript操控HTML的方法

innerHTML

-方法：組完字串後，傳進語法進行渲染
-優點：效能快
-缺點：資安風險，要確保資料來源沒問題


craeteElement

-方法 ：以DOM節點來處理
-優點：安全性高
-缺點：效能差

评论

发表评论

此博客中的热门博文

[DOM]-1.什麼是DOM

-
图片
1.瀏覽器在解析網頁結構的時候會去產生一個document。 2.document裡面的話就會依序解析裡面的html標籤。 3.標籤裡面有哪些元素例如:body裡面有h1、a連結。   (1).<h1>Header</h1>   (2). <a href="#">MyLink</a> 4.練了這章節顧名思義就是JavaScript可以控制標籤、ID、class取出裡面的值或是給予裡面的值。 5.Element代表一個網頁的元素,取ID就可以取出裡面的值，textContnet就是透過這樣的方式更改文字內容。    (1).document.getElementbyId('ID').textContent ="內容"; 5.下方為樹狀圖
阅读全文

[DOM]-7.innerHTML(下)

-
<ul class="list"></ul> var el = document.querySelector('.list'); var link ='http://www.google.com.tw'; var name = '查理'; el.innerHTML ='<li><a href="'+link+'">'+name+'</li>'; 1.如href以及文字內容設為變數，在寫入字串到innerHTML的字串裡面加入href以及文字內容需要加入'+變數+' codepen
阅读全文

[DOM]-6.innerHTML(上)

-
<div id="main"></div> var el = document.getElementById('main'); var str = '<h1 class="blue">1234</h1>'; el.innerHTML = str+str; .blue{ color: blue; } 1.如在html的id="main"文字加Hello使用innerHTML會清空 2.Element html標籤拉進去在裡面使用innerHTML 3.textContent是新增文字的節點 codepen
阅读全文