Установить значение элементов html в "runtime"

Question

В моем веб-приложении html5 я устанавливаю значение некоторых элементов html при загрузке DOM. Используемые значения берутся из некоторых глобальных переменных Javascript, которые определяются после начала загрузки DOM, но до добавления соответствующего элемента hmml 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

Ого, что? Это выглядит как ужасный синтаксис. Вы пытаетесь изобрести perl внутри HTML? Вы полностью разобьете любой парсер с такой штукой!

Поскольку проблема, которую вы пытаетесь решить, как представляется, количество кода, почему бы вам не просто сосредоточиться на сокращении кода на соответствующие функции, как:

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

Answer 3

Почему установить значение кнопки перед DOM готов? Это один из способов сделать это во время разбора страницы.

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

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

/* more HTML */