В общем, когда у вас есть такая повторяющаяся логика, вы инкапсулируете логику в функцию:
function setText(id, text) {
var element = document.getElementById(id);
if (element) {
element.textContent = text;
}
return element;
}
тогда вы можете сделать это:
setText("routeTwoName", "Tim");
setText("routeThreeName", "David");
setText("routeFourName", "Ricky");
setText("routeTenName", "Ric");
Вот обновленная версия фрагмента из вопроса:
function setText(id, text) {
var element = document.getElementById(id);
if (element) {
element.textContent = text;
}
return element;
}
setText("routeTwoName", "Tim");
setText("routeThreeName", "David");
setText("routeFourName", "Ricky");
setText("routeTenName", "Ric");
<div class="panel-body">
<h4><span id="routeTwoName">Name</span></h4>
</div>
<div class="panel-body">
<h4><span id="routeTenName">Name</span></h4>
</div>
Другим вариантом является предоставление себе основанных на множестве функций манипулирования DOM (например, API jQuery, но без использования jQuery [если, конечно, вы не хотите, конечно, он уже написан и протестирован]) чем основанные на элементах такие, как DOM. Мой ответ здесь содержит пример начала по этому пути.