Script cannot find attributes of an appended html element

It outputs undefined for both. It should output lpoop and /poop. No errors are given

<script type="text/javascript">
  function add() {
    console.log("add")
    var l = document.createElement("img")
    l.setAttribute("src", "/poop")
    l.src = "/poop"
    l.setAttribute("class", "l")
    l.className = "lpoop"
    document.getElementById("b").appendChild(l)
  }
  </script>
  <script>
  function find (){
  console.log("find");
  const elm = document.getElementById("b").firstChild;
  console.log(elm.className);
  console.log(elm.src);
  }
</script>
<button onclick="add()">
  hi
</button>
<button onclick="find()">
find
</button>
<div id="b">

</div>

If there is any more detail you want pls comment.