在“运行时”设置 html 元素值

Question

在我的 html5 Web 应用程序中，我在加载 DOM 时设置一些 html 元素的值。使用的值取自一些 Javascript 全局变量，这些变量是在 DOM 加载开始之后、添加相应的 html DOM 元素之前确定的。现在我的代码看起来像这样：

 myBtnText="some value";
 //....

 <input type="button" id="myBtn" onclick="DoSomeAction();" />
 <script type="text/javascript">
     document.getElementById("myBtn").value = myBtnText;
 </script>

代码正在工作，但我想改进它，以避免 document.getElementById("myBtn") 进行的调用，并让代码更小。我正在考虑简化它，执行以下操作：

<input type="button" id="myBtn" value=/*<myBtnText>*/ onclick="DoSomeAction();" />

其中 // 是一个表达式，可以帮助获取 myBtnText 全局变量的值。

如果这可能的话，有什么想法吗？如何实现？

Answer 1

如果您使用 JQuery，您可以通过执行以下操作来避免调用 document.getElementById：

$('#myBtn').val();

获取字段的值以及：

$('#myBtn').val("something");

设置字段的值。您可以在这里了解更多信息：

http://api.jquery.com/val/

Answer 2

为什么要在 DOM 准备好之前设置按钮值？这是在解析页面期间执行此操作的一种方法。

myBtnText="some value";
 //....
/* some HTML */

    <SCRIPT>
    document.write('<input type="button" id="myBtn" onclick="DoSomeAction();" value="'+myBtnText+'"/>');
    </SCRIPT>

/* more HTML */

Answer 3

哇，什么？这看起来是一个糟糕的语法。您是否想在 HTML 中重新发明 perl？你会用这种东西彻底破坏任何解析器！

既然您试图解决的问题似乎是代码量，为什么您不只专注于将代码减少为适当的函数，例如：

<script>
function setValue(id, value) {
   document.getElementById(id).value = value;
}
</script>