I am currently writing HTML and JS code in the following form, but when I put a new value in the div tag value, the event does not happen.

the Javascript code is

$('#CdText').on('input', function () {
    $('#CdText').innerHTML = concat($('#CdText').innerHTML, 'test');
});

HTML is

<div id="CdText" class="ui-state-highlight" contenteditable="true">1234</div>

The above code does not work.
However it works

$('#appInput').on('input', function () {
   $('#appInput').val(concat($('#appInput').val(), 'test'));
});

because HTML is

<input id="appInput" class="form-control ap-input">
  <div>1234</div>
</input>

By the way, changing $('#CdText').on('input', function () { as follows did not work.
$('#CdText').on('div', function () {
$('#CdText').on('change', function () {
$('#CdText').on('change', 'div', function () {

I hope I'm doing something wrong with Jquery's use of the on() method, but as of yet I haven't found what's wrong.

If you know how to write an event to be triggered every time something is entered into a div like the above, please let me know.

By the way, $('#CdText').on('input', function () { is properly contained in $(function () {}).
css of CdText div tag is inline-block. so it can write as input.

Thank you for reading.