如何使用 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