I have integrated summernote6 text editor into my website , i have a button that when pressed should change the default text content inside of the summernote6 text editor.
I am using javascript for the function which uses innerhtml to modify the below HTML to change the heading , However when i press the button nothing happens , but if i move the id "headingram" to the DIV one level above it changes the entire thing , however changing this DIV gets rid of the whole text box which is not what i want.
<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);}
i have a seperate button that calls the headinchanger() function , i know this works because when i move the id to the DIV above it changes