如何訪問 HTML DOM 元素 javascript function 到另一個 javascript

Question

I want to ask that how I should code a Javascript function that on click to btn_1 main function should execute and during the execution of the main function, the sub-function append to the div which I have created in the main function.

   document.getElementById('btn_1').addEventListener('click', main);


   function subfunc(){

        const h1 = document.createElement('h1');
        h1.appendChild(document.createTextNode('it is working'));
        h1.id = 'heading';
        
    }
    function main(){
        const div = document.createElement('div');
        div.className = 'main-showcase'        
       
    }

Answer 1

你有幾個選擇：

1. 讓subfunc返回h1元素； 有main調用它來獲取元素和 append 它到div ：

    function subfunc() { const h1 = document.createElement('h1'); h1.appendChild(document.createTextNode('it is working')); h1.id = 'heading'; return h1; } function main() { const div = document.createElement('div'); div.className = 'main-showcase' div.appendChild(subfunc()); }

2. 讓main將div傳遞給subfunc並讓subfunc進行附加：

    function subfunc(div) { const h1 = document.createElement('h1'); h1.appendChild(document.createTextNode('it is working')); h1.id = 'heading'; div.appendChild(h1); } function main() { const div = document.createElement('div'); div.className = 'main-showcase' subfunc(div); }

或者實際上您可能還可以采取其他幾種方法，但這是我想到的主要兩種方法。