Javascript 动态更改innerText'；s在没有eval（）的情况下启动

我有一些代码（几个批次）如下所示：

1    <div id="backgrounds" class="centery">Backgrounds
2        <div id="bk1" class="attr">Background 1
3            <div class="container">
4                <!-- Lots more HTML here /-->
5            </div>
6        </div>
7    </div>

eval(changeFirstCharacters('bk1', "'" + document.getElementById('background1').value + "'"));

但因为我希望它只在事件侦听器触发时执行，所以它只输出代码，而不是对代码进行求值。因此，my event listener包含以下行：

1    <div id="backgrounds" class="centery">Backgrounds
2        <div id="bk1" class="attr">Background 1
3            <div class="container">
4                <!-- Lots more HTML here /-->
5            </div>
6        </div>
7    </div>

eval(changeFirstCharacters('bk1', "'" + document.getElementById('background1').value + "'"));

其中

background1

是一个选择框

如何重新编写

changeFirstCharacters

以不需要求值，但仅在调用时仍能工作

changeFirstCharacters（）代码

---

我看不出那句话有什么动态。我们需要

eval

的唯一原因是动态生成代码，但

newText

和

id

都不会更改生成的代码。因此，应采取以下措施：

document.getElementById(id).innerHTML = newText + 
    document.getElementById(id).innerHTML.substr(document.getElementById(id).innerText.length, 
    document.getElementById(id).innerHTML.length - document.getElementById(id).innerText.length);

调用人（不在第二个参数周围添加引号）：

---

另外，第一个代码调用了

getElementById（id）

五次，这不仅是性能上的损失，而且相当难看。您可能希望将其改写为：

var el = document.getElementById(id);

el.innerHTML = newText + el.innerHTML.substr(el.innerText.length, 
    el.innerHTML.length - el.innerText.length);

---

我看不出这里有什么问题？而且我在这里也看不到eval的任何用途。在“像这样的一行：”和“where

background1

是一个选择框”之间。这行代码以

eval（

var el = document.getElementById(id);

el.innerHTML = newText + el.innerHTML.substr(el.innerText.length, 
    el.innerHTML.length - el.innerText.length);