动态更改innerText的开始而不使用eval（）

Question

我有一些代码（几个批次）看起来像这样：

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>

我有一个我编写的JS函数（changefirstCharacters）将返回脚本以将第2行更改为：

2        <div id="bk1" class="attr">Some text I specify

但是因为我希望这只在事件监听器触发时执行，所以它只输出代码，而不是对其进行评估。因此，我的事件监听器包含如下行：

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

background1是一个选择框。

如何重新编写changeFirstCharacters不需要eval，但只在调用时才能工作？

changeFirstCharacters（）代码

function changeFirstCharacters(id, newText) {
    return '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 + ')';
}

Answer 1

我不明白这句话有什么动态。我们需要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);

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

changeFirstCharacters('bk1', document.getElementById('background1').value)

---

此外，第一个代码调用getElementById(id)五次，这不仅是性能损失，而且相当难看。您可能希望将其重写为：

var el = document.getElementById(id);

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