如何更改具有递增值的HTML元素？

<script>
  var count = 0; // 初始值为0
  function increment() {
    count++; // 递增
    document.getElementById("elementId").innerHTML = count; // 修改HTML元素的值
  }
</script>

<button onclick="increment()">点击递增</button>
<p id="elementId">0</p>

<style>
  .counter::before {
    counter-increment: myCounter; /* 递增计数器的值 */
    content: counter(myCounter); /* 显示计数器的值 */
  }
</style>

<p class="counter">递增值为： </p>

<?php
  $count = 0; // 初始值为0
  $count++; // 递增
?>

<p>递增值为： <?php echo $count; ?></p>