iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
0
自我挑戰組

前端我來了 - 30天 JavaScript 從無到有 系列 第 28

[30天 JavaScript 從無到有 Day 28] 實作筆記-2

透過 JavaScript 調整 HTML

replace() : 字串取代

// replace('欲取代', '取代') 
var a = 'abcde';
a = a.replace('bc', '666');
console.log(a);

// output : a666de

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlText);

position :

  • beforeBegin:在 element 前插入
  • afterBegin:在 element 第一個子元素前插入
  • beforeEnd:在 element 最後一個子元素後面插入
  • afterEnd:在 element 後插入

JavaScript

var elenemt, html
element = 'income__list';
html = 'xxxxxxx'; // html String
document.querySelector(element).insertAdjacentHTML('beforeend', html);

html

<div class="container clearfix">
    <div class="income">
        <h2 class="icome__title">Income</h2>
         
        <!-- beforeBegin -->
         
        <div class="income__list">
            <!-- afterBegin -->
            <div class="xxx" id="xxx">  xxxx </div>  
            <!-- afterEnd -->
                                  
    </div> <!-- afterEnd -->
</div>

實作了將近一個小時,實在沒甚麼好寫的,來科普一下 JS 調整 html 其他做法

insertAdjacentText -> 寫入字串

// 最法類似 insertAdjacentHTML,position用法也相同,

element.insertAdjacentHTML(position, text);

比較 inner (抓值取值)
.innerHTML -> 特定標籤下所有的內容
.textContent -> 特定標籤下的文字內容

-> 無大差異,insertAdjacent 效能較佳


目前是是一連串的實作,文章就先當成實作筆記吧~
會記錄一些在實作中使用到的作法、概念。

課程 : https://www.udemy.com/course/the-complete-javascript-course/
來源 :
https://www.fooish.com/javascript/string/replace.html
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText
https://www.itread01.com/content/1546401436.html


上一篇
[30天 JavaScript 從無到有 Day 27] 實作筆記-1
下一篇
[30天 JavaScript 從無到有 Day 29] 實作筆記-3
系列文
前端我來了 - 30天 JavaScript 從無到有 30

尚未有邦友留言

立即登入留言