JS知识点: 为Input的Value赋值的坑

     在使用JS和JQuery赋值value的时候，一直容易混淆，今天我们来总结下两者赋值有什么区别？

      JS是一门网页脚本语言，用来控制网页的行为。

      JQuery是基于JS的一种框架，简单的说就是JS的一个扩展，让js更好用，用最少的代码，完成更多漂亮的功能，极大简化了JavaScript 编程。

       下面我们上干货

        HTML代码如下，注意这段div带有style="display:none;"，所属div隐藏，使用的赋值方式也需要注意，之前写项目的时候，就掉进这个坑里。

<div class="layui-inline" style="display:none;">
    <label class="layui-form-label">主机名称</label>
    <div class="layui-input-inline">
      <input type="text" name="host_name" id="hostnameSelect" class="layui-input" placeholder="请输入主机名" style="width: 170px;float: left">
     </div>
</div>

      现在我们要给id为hostnameSelect的Input标签赋值。

$('#hostnameSelect').attr("value","test-k8s-215")

      推荐使用这种方式。

     不推荐使用下面这种方式，以为input父元素带有style="display:none;",这种写法会失效。

$('#hostnameSelect').val("test-k8s-215")

​       JS还有一种原生的写法：

document.getElementById("hostnameSelect").value="test-k8s-215"

       意思是返回一个匹配特定ID为hostnameSelect的DOM对象，并将value设置为"赋值"

        效果：