append div如何跟隨數字

Question

我希望它在獲得值 > 或 == 后顯示，然后顯示。 該值由 ajax 獲得：

1.如何在div下方顯示數值？

 .mainbox{ width:auto; height:auto; padding:20px; background:#f00; }.innerbox{ width:100%; height:100px; margin-bottom:10px; background:#fff; }

 <div class="mainbox"> <div id="01" class="innerbox" style="display:block" value="100"> <span>you have 100 point</span> </div> <div id="02" class="innerbox" style="display:block" value="150"> <button type="button">get your point 150</button> </div> <div id="03" class="innerbox" style="display:none" value="200"> </div> <div id="04" class="innerbox" style="display:none" value="250"> </div> <div id="05" class="innerbox" style="display:none" value="300"> </div> <div id="06" class="innerbox" style="display:none" value="350"> </div> </div>

Answer 1

目前尚不清楚您正在嘗試做什么，但從代碼看來，您希望每次單擊按鈕時點數增加 50。 我稍微修改了您的 HTML 以展示您可以做到的一種方法。

要理解的重要部分是如何使用以下方法從文檔中檢索元素

document.getElementById(id)

一旦您可以訪問該元素，您就可以開始更改或操作數據。 您可以在此處閱讀有關 DOM 和方法的更多信息

 .mainbox{ width:auto; height:auto; padding:20px; background:#f00; }.innerbox{ width:100%; height:100px; margin-bottom:10px; background:#fff; }

 <div class="mainbox"> <div id="1" class="innerbox" style="display:block" value="100"> <p id="exampleElement">You have 100 points</p> </div> <div id="2" class="innerbox" style="display:block"> <button type="button" onclick="handleButtonClick()">get your points</button> </div> </div> <script> const handleButtonClick = () => { let el = document.getElementById('exampleElement'); //here you are saying your target element is 'exampleElement' let num = el.innerHTML.replace(/\D/g,'') //here we use Regex to strip the string of all letters, leaving only the number num = parseInt(num) + 50; //here we convert the string to an int and add 50 el.innerHTML = `You have ${num} points`; //here we tell the target element to update with a new string } </script>