如何使用 DOM JavaScript 插入元素

Question

此代碼僅適用於某些控制台...

我希望一個 div 在單擊時出現在按鈕之前，僅使用 DOM。

我該如何修復此代碼？？？？

<html>
    <body>
        <div id ='div'>
        <button id = 'button'>click me!</button>
        </div>

        <script>
            var button = document.getElementById('button');
            var div = document.getElementById('div');
            var appearingDiv = document.createElement('div');
            var appearingDivText = document.createTextNode("Hi how are you? Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?Hi how are you?");
            
            appearingDiv.appendChild(appearingDivText);
            
            button.addEventListener('click',buttonClicked);
            
            function buttonClicked(){
                div.insertBefore(appearingDiv,button);
            }   
                
        </script>
        
    </body>
</html>```

Answer 1

insertBefore方法需要兩個參數“引用”，但您只傳遞一個參數。

解決方案：

 <!DOCTYPE html> <html> <body> <div class="header"> <div class="old">This is paragraph 1</div> </div> <script> //New Element var newDiv = document.createElement('div'); var newDivText = document.createTextNode('this is a new div!'); newDiv.appendChild(newDivText); //Add to header div var container = document.querySelector('div.header'); var oldDiv = document.querySelector('div.old'); container.insertBefore(newDiv, oldDiv); </script> </body> </html>

Answer 2

這是一個錯字： insertBefore('newDiv, oldDiv'); 您傳入一個字符串，刪除 newDiv, oldDiv -> insertBefore(newDiv, oldDiv); 周圍的單引號； — 瑞安·威爾遜

如何使用 DOM JavaScript 插入元素

問題描述

2 個解決方案

解決方案1
1 2020-08-27 18:31:56

解決方案2
-1 2020-08-27 18:34:13

如何使用 DOM JavaScript 插入元素

問題描述

2 個解決方案

解決方案1 1 2020-08-27 18:31:56

解決方案2 -1 2020-08-27 18:34:13

解決方案1
1 2020-08-27 18:31:56

解決方案2
-1 2020-08-27 18:34:13