Javascript InnerHTML 不适用于 DIV 中的 DIV [关闭]

Question

我已将summernote6 文本编辑器集成到我的网站中，我有一个按钮，按下该按钮应更改summernote6 文本编辑器内的默认文本内容。

我正在使用 javascript 作为函数，该函数使用 innerhtml 修改下面的 HTML 以更改标题，但是当我按下按钮时没有任何反应，但是如果我将 id“headingram”移动到 DIV 上一层它会改变整件事，但是更改此 DIV 会删除我不想要的整个文本框。

<div class="panel-body no-padding">
<div class="summernote6" id="headingram">
    <h5>Hello Jonathan!</h5>

</div>

function HeadingChanger(){
let HeadingTitle = document.getElementById('headingram').innerHTML ="<H1>HELLO</H1>";
console.log(HeadingTitle);}

我有一个单独的按钮调用 headinchanger() 函数，我知道这是可行的，因为当我将 id 移动到上面的 DIV 时，它会发生变化

Answer 1

我认为您的问题源于外部 div 没有结束 div 标签：

function HeadingChanger() {
  let HeadingTitle = document.getElementById('headingram').innerHTML = "<H1>HELLO</H1>";
}

<div class="panel-body no-padding">
  <div class="summernote6" id="headingram">
    <h5>Hello Jonathan!</h5>
  </div>
</div>

<button onclick="HeadingChanger();">Click</button>