iT邦幫忙

0

JavaScript 基礎知識-操控 HTML 的方法 .innerHTML

前面我們講到選取了元素,也講到了設定屬性和讀取屬性,但倘若我們想要在某個元素下再新增元素且有內容時,可以怎麼做?
這裡就介紹其中一種方法 .innerHTML 也順便試著組字串

先假設我們的頁面上有一個

<ul class="list"></ul>

而我們要在 .list 底下新增 li 元素,這時候可以這樣寫:

var el = document.querySelector('.list');
el.innerHTML = '<li>Item01</li>';

這時候我們看頁面時,結構會呈現如下:

<ul class="list">
    <li>Item01</li>
</ul>

這是比較簡單的方式,倘若我們今天想要新增 a 元素並設定 href 連去 https://www.google.com.tw/
這時候就會如下:

el.innerHTML = '<li><a href="https://www.google.com.tw/">Item01</a></li>';

這裡比較要注意的是單雙引號的運用,我們要避免單雙引號交錯使用,而是要巢狀使用,不然字串的組合上會出錯
例如不可以:

el.innerHTML = '<li><a href="https://www.google.com.tw/'>Item01</a></li>";

這樣交錯使用會使字串組合上出錯,如果為了方便統一使用單引號或者雙引號:

el.innerHTML = "<li><a href="https://www.google.com.tw/">Item01</a></li>";

這樣也會出現錯誤,因為程式判斷上無從得知哪裡是開始哪裡是結束
如果跟第一次的寫法一樣,但單雙引號交換使用呢?

el.innerHTML = "<li><a href='https://www.google.com.tw/'>Item01</a></li>";

答案是可以的,把握一個原則就可以了,那就是巢狀使用,跟 HTML 標籤一樣
搭配變數來組合字串試試看吧:

var link = 'https://www.google.com.tw/';
var str =  'Item01';
el.innerHTML = '<li><a href="'+ link +'">'+ str +'</a></li>';

上面組合出來的字串會跟

el.innerHTML = '<li><a href="https://www.google.com.tw/">Item01</a></li>';

一樣,字串的組合上單雙引號的運用要頗為小心,可以試著組合看看,對後面要組合多筆資料並加入到頁面的 HTML 上會有比較多的了解


尚未有邦友留言

立即登入留言