How does the native js listen for events for later inserted elements

jq can use the on method to listen for later inserted elements. How to write

in native js
<div id="demo"></div>
<script>
    $("-sharpdemo").on("click", ".test", function () {
        console.log(66)
    })
    $("-sharpdemo").append("<p class="test">xxxx

") </script>
Mar.11,2021

document.getElementById('demo').addEventListener('click', function (e) {
       if(e.target.classList.contains('test')){
            console.log(66)
        }
    })

document.getElementById("demo").addEventListener("click", function(e){ 
      if(e.target.className==="test"){
        console.log(66)
      }
    });
Menu