javascript - 替代 document.getElementById() 的 JavaScript/jQuery 最佳实践是什么？

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 3 年前。

Improve this question

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

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

File1(.js 文件)-> myjsfile.js

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

File2(.html 文件)-> 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

尝试以下操作。它工作正常。尝试 $('#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>