JavaScript / jQuery作为document.getElementById()的替代品的最佳实践是什么?

Question

我试图通过从我的javascript函数中获取值来通过html显示文件名(这些在2个单独的文件中(。我正在从另一个函数调用jsfnc()函数，这很好，这不是我关心的问题。
下面指定的代码片段达到了它的目的，它获取文件名并显示它。我在这里关心的是用属于javascript或jQuery最佳实践的其他东西替换document.getElementById。

目前，我使用以下document.getElementById显示文件名。但是，作为 JavaScript 最佳实践，有人可以建议我一个替代方案吗？

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>

我尝试了以下方法。但看起来我错过了一些东西，因为我对此很陌生。

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

Answer 1

请尝试以下操作。 它工作正常.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>