时间戳

首页 > 解决方案 > 替代 document.getElementById() 的 JavaScript / jQuery 最佳实践是什么？

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

问题描述

我试图通过从我的 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');

标签： javascriptjquerydifference

解决方案

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

推荐阅读