Append dynamic javascript variable to HTML tag. InnerHTML & insertAdjacentHTML both incorrect

Question

I have a couple of javascript variables that are being updated as an animation plays out.

What I'd like to do is append these to HTML elements but I'm having a few problems. I can make it work by introducing a span tag into the HTML and targeting that instead but I'd like to know how I can do it without.

The code that currently works:

  <p id="infoCurrentDepth">Current Depth:<span id="bla"></span></p>

  var bla = $('bla');

  function updateInfoPanel(){

    bla.innerHTML = scaleControl.value;
}

I've removed code that isn't required.

What I'd like to do is just append the variable to to the p tag instead. When I try this is repeats the value several times instead of replacing it.

Thanks for any help

Answer 1

Since you are using jQuery there is no need to overwrite $ to create a element selector. Use jQuery id selector along with manipulation methods like .html()/.append() like

So try the below after removing the var $ = function(){...}

$('#infoCurrentScale').append('sdfsdf');