[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

评论

发表评论

此博客中的热门博文

JavaScript-頁數總結

-
不斷的測試到現在都天亮了，舒服... 其實就3個重點:  1.利用for迴圈生成頁數，以陣列的長度除以6。因為6筆為1頁，再將這個6筆為1頁以for迴圈來跑。假設總共有18筆內容，再將18除以6宣告為頁數的變數，再以for迴圈1跑到3。 2.初始筆數內容就比較簡單，以for迴圈0跑到6。 3.跟前面寫的JavaScript-頁數模擬利用全域變數來控制迴圈有點類似，但是在這裡以監聽點擊頁數事件來進行。以偵測內容來進行判斷。 <div class="container_page"></div>//生成的頁碼 <div class="container_content"></div>//6筆資料 .str{ width: 70px; } a{ padding: 0 8px; } em{ margin: 50px 50px; } var content = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18']; var container_page = document.querySelector('.container_page');//頁數父元素 var container_content = document.querySelector('.container_content');//筆數父元素 var contentLen = content.length;//陣列長度 var pages =contentLen/6;//頁數生成六筆為一頁 var page_str ='';//頁數字串 var start_content_str ='';//初始筆數字串 //利用for迴圈印出每六
阅读全文

六角學院-高雄資訊旅遊

-
終於將高雄資訊旅遊完成，做的過程蠻煎熬因為不停的想不停的看別人怎做的，畢竟自己的還沒做過題目高手都蠻多的， 雖然煎熬但是一個題目真的可以學到東西，蠻充實的..一開始還好但是碰到一個頁數監聽跟熱門監聽還有表單的監聽要融合起來真的蠻頭痛，熱門跟表單還好。就差在頁數監聽卡兩天的時間， 想一想不行找codepen看前輩們是怎麼做的模式，看到好幾個真的看得不是很懂，有一個的模式蠻特別以函式為順序先監聽在一個一個函式寫將每筆生成陣列最後顯現渲染，顯現渲染是一個函式這個函式也是共用，也在熱門監聽跟表單監聽做融合 然後再這兩個裡面放頁數監聽，後來才解決頁數的問題。因為真的不知道監聽裡面還可以放監聽而且函式可以共用也就是說熱門監聽跟表單監聽可以用一個函式來融合。真的感恩這位 大大的程式碼 完成
阅读全文

JavaScript-巢狀迴圈內外if判斷字串與陣列

-
這個部分屬於如果說Json格式本身外面有一個陣列蛋如果說最裡面還有一個陣列的話怎去完整地抓取(名字一項項的列出li),用一個for迴圈是能整個抓不過只要有一個陣列放在li會將整個陣列掛在li。這裡用巢狀迴圈內外迴圈各有if的判斷式，這兩個判斷式用typeof去判斷，判斷是否為Object以及string。 在這裏使用createElement以防innerHTML在每一次 <h1>列出農夫名字</h1> <ul class="list"></ul> var farms =[ { farmer:'查理' }, { farmer:'卡斯伯' }, { farmer:['喬丹','迪奧'] } ]; var farmLen = farms.length; var el = document.querySelector('.list'); var str =''; for(var i=0;i<farmLen;i++){ var farmerLen = farms[i].farmer.length; if(typeof(farms[i].farmer)=='string'){//判斷string var content = '<li>'+farms[i].farmer+'</li>'; str +=content; el.innerHTML =str; console.log(farms[i].farmer); } for(var j=0;j<farmerLen;j++){//跑Json裡面的陣列 if(typeof(farms[i].farmer)=='object'){//判斷object var content = '<li>'+farms[i].farmer[j]+'</li>'; str +=c
阅读全文