Javascript made changes but not showing in browser

[Vyskoc]

I am using javascript here to insert an input box if the user has clicked yes.

  let taxRef = document.getElementById("taxRef");
  function checkInput() {
      if(taxRef.firstChild.nextSibling.checked === true){
      let newEl = document.createElement("input");
      newEl.setAttribute("type","text");
      taxRef.firstChild.nextSibling.appendChild(newEl);
      } 
  }
  taxRef.addEventListener("change", checkInput, false);

the html code is as follows

<label for="taxRef"></label>
<div id="taxRef" name="taxRef">
  <p>Do you have a UTR(tax reference) number?</p>
  <input class="well well-sm" type="radio" name="yesOrNo" value="yes"/>Yes<br>
  <input class="well well-sm"type="radio" name="yesOrNo" value="no"/>No
</div>&nbsp&nbsp&nbsp
<span class="error"><?php echo $taxRefErr;?></span><br>

when I open the page and click yes, the console shows that a new input element has been inserted.

but the document displayed in browser is not showing any input box at all.

Can someone tell me what has gone wrong here please? Thanks

[Marmiz]

It may just be that because the input is empty it has no width, so it looks like it’s not on the page.

Just as a quick test, you can try to give it either a width or a value (anything that makes it take some space actually) and see if it works