如何先添加innerhtml，然后將eventlistner添加到隨后的元素

Question

1）為什么第一個按鈕而不是第二個按鈕顯示在DOM上

2）對於第二個Button，我希望問候語首先顯示在DOM上，然后向其中添加eventlistner。 我該如何實現？

 var greeting = "hi" var greetingSpace = document.getElementById('exampleTwo'); greetingSpace.innerHTML = greeting; document.getElementById('SecondButton').addEventListener('click', function() { greetingSpace.innerHTML = "hello"; }) 

 <!-- button shows --> <div id="exampleOne"> <button id="firstButton"> First button </button> </div> <!-- Button doesn't show and the error says 'Cannot read property 'addEventListener' of null'--> <div id="exampleTwo"> <button id="SecondButton"> Second Button </button> </div> 

Answer 1

設置greetingSpace.innerHTML您將覆蓋第二個按鈕並將其從DOM中刪除。

最簡單的解決方案是將問候語繪制到單獨的DOM元素中，而不是包含按鈕的#exampleTwo ：

 var greeting = "hi" var greetingSpace = document.getElementById('greetingSpace'); greetingSpace.innerHTML = greeting; document.getElementById('SecondButton').addEventListener('click', function() { greetingSpace.innerHTML = "hello"; }) 

 <div id="exampleOne"> <button id="firstButton"> First button </button> </div> <div id="exampleTwo"> <div id="greetingSpace"></div> <button id="SecondButton"> Second Button </button> </div> 

Answer 2

當您使用innerHTML屬性覆蓋exampleTwo元素的內容時，請使用

greetingSpace.innerHTML = greeting;

因此，該按鈕已不存在，導致您收到錯誤消息。 為greetingSpace創建另一個<div> / <span> ，您的按鈕將開始顯示