jquery - 画像を変更したり機能したりしないjQueryで画像ソースを変更する

Question

#play-pause は src 属性を変更する必要があります。innerHtml を使用しようとしましたが、'/media/pauseButton.png" />' のような値を入力できません。

var video = document.getElementById("postvideo");
var playButton = document.getElementById("play-pause");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
    // Play the video
    video.play();
    // Update the button to 'Pause'
    playButton.innerHTML = "<img src="<?php echo get_template_directory_uri(); ?>/media/playButton.png" />";
} else {
    // Pause the video
    video.pause();

    // Update the button to 'Play'
    playButton.innerHTML = "<img src="<?php echo get_template_directory_uri(); ?>/media/pauseButton.png" />";
}

更新後、 #play-pause は変更されておらず、関数は video.pause(); に変更されています。動作しなくなりました。

私がやりたいことは、画像ソースのパスを変更して、再生アイコン画像から一時停止アイコン画像に変更することです。ドキュメント準備完了時のレイアウト html の初期出力は次のとおりです。

<div id="play-pause">
    <img src="<?php echo get_template_directory_uri(); ?>/media/playButton.png" />
</div>