在"runtime"处设置 html 元素值

Question

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

 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>