在javascript中編輯innerhtml后如何更新頁面

Question

我有一個 ID 為 "headingram" 的 HTML 段落，我使用 JavaScript innerhtml 將段落的內容更新為 "hello" ，然后我的代碼在控制台中打印新值。

到目前為止，我可以知道該值正在更新，因為它在控制台中顯示，但是實際的網頁不會刷新以顯示新值，請找到 HTML 和 JavaScript 附加的片段。

<div class="note-heading-indicate">
<h2><i class="fa fa-comments-o"></i> Latest Notes</h2>
<p id="headingram">You have 10 new message.</p>

function HeadingChanger(){
    let HeadingTitle = document.getElementById('headingram').innerHTML ="hello";
    console.log(HeadingTitle);
}

Answer 1

根據我的最佳猜測，我認為您的代碼在某種程度上沒有正確調用該函數。 這樣稱呼..

這是您的代碼片段，它可以像您需要的那樣工作。

 // call the function here.. HeadingChanger() function HeadingChanger(){ let HeadingTitle = document.getElementById('headingram').innerHTML ="hello"; console.log(HeadingTitle); }

 <div class="note-heading-indicate"> <h2><i class="fa fa-comments-o"></i> Latest Notes</h2> <p id="headingram">You have 10 new message.</p> </div>

Answer 2

JavaScript innerHTML更改 webPage 中的內容，但不會重新加載網頁。

在您的情況下，網頁中的內容應該在沒有頁面刷新的情況下更新。 您的代碼似乎有效。

看這里： https : //codesandbox.io/s/rough-tree-hhmco?fontsize=14&hidenavigation=1&theme=dark