如何使用图标栏更改Div的内容？

<div id="myDiv">初始内容</div>

.icon-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ccc;
  padding: 5px;
}

.icon-bar i {
  cursor: pointer;
  margin: 0 5px;
}

document.addEventListener('DOMContentLoaded', function() {
  var iconBar = document.querySelector('.icon-bar');
  var myDiv = document.getElementById('myDiv');

  iconBar.addEventListener('click', function(event) {
    if (event.target.tagName === 'I') {
      var newContent = event.target.getAttribute('data-content');
      myDiv.innerHTML = newContent;
    }
  });
});

<link rel="stylesheet" href="path/to/icon-bar.css">
<script src="path/to/icon-bar.js"></script>