透過 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