What is the JavaScript / jQuery best practice as a substitute to document.getElementById()?

Question

I'm trying to display the filename through the html by fetching the value from my javascript function (these are in 2 separate files). I'm invoking jsfnc() function from another function, which is all fine and that is not my concern.
The below specified code snippet serves its purpose, it fetches the filename and displays it. My concern here is to substitute document.getElementById with something else that falls under javascript or jQuery best practices.

Currently, I'm displaying the filename using the below document.getElementById. But, as a javascript best practice can someone please suggest me an alternative to this?.

File1 (.js file) -> myjsfile.js

function jsfnc(){
    var fn= myFile.name;
    document.getElementById('fileName').innerHTML = fn;
}

File2 (.html file) -> myhtmlfile.html

<div>
    <div class="col-md-4 col-sm-4 control-label" style="color: #1474BE">
        <b>Filename:</b>
    </div>
    <div class="col-md-8 col-sm-8">
        <label>
            <span id="fileName"/>
        </label>
    </div>
</div>

I've tried the following. But looks like I'm missing something as I'm quite new to this.

var fn = $("span#fileName").val();

var fn= $('#fileName').attr('id');

Answer 1

Try the following. it's working fine.try $('#fileName').text();

$('#fileName').text("THIS IS MY FILE NAME");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class="col-md-4 col-sm-4 control-label" style="color: #1474BE">
        <b>Filename:</b>
    </div>
    <div class="col-md-8 col-sm-8">
        <label>
            <span id="fileName"/>
        </label>
    </div>
</div>