innerHTML 替换不反映

Posted 2023-05-07

【中文标题】innerHTML 替换不反映

【英文标题】：innerHTML replace does not reflect

【发布时间】：2010-11-20 13:48:06

【问题描述】：

我有这样的 html

<div id="foo">
<select>
<option> one </option>
</select>
</div>

当我使用时

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ;

innerHTML 被替换，但它没有反映在浏览器中。

如果我提醒 innerHTML，我可以看到它现在已经更改，但在浏览器中它仍然显示旧选项。

有什么方法可以让浏览器识别这个变化？

提前致谢。

【参考方案1】：

在 Firefox 3.5 中对我来说很好用

Working Demo

编辑：您必须使用 IE。您需要创建一个新选项并将其添加到元素中，或者修改现有选项的文本

Working Demo - 经过测试并在 FireFox 和 IE 7 中运行。

var foo = document.getElementById('foo');
var select = foo.getElementsByTagName('select');
select[0].options[0].text = ' two ';

【参考方案2】：

最好给选择标签一个 id 并使用新选项来添加一个项目。

var sel =document.getElementById ( "selectElementID" );
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + 2;
elOptNew.value = 'insert' + 2;
sel.options.add ( elOptNew );

如果你需要更换一个选项

sel.options[indexNumber].text = 'text_to_assign';
sel.options[indexNumber].value = 'value_to_assign';

【参考方案3】：

在 IE 中设置一个 select 的 innerHTML 有一个错误。不确定他们是否在 7 或 8 中修复了此问题。它切断了您提供的一些文本，因此具有格式错误的选项。所以你必须设置包含选择的outerHTML。由于outerHTML 只是（或曾经是）IE，我通常使用select.parentNode.innerHTML。我将 ID 分配给选择。但是由于您正在设置 div 的 innerHTML，因此您已经被覆盖了。这只是一个仅供参考。

我认为您真正的问题是 replace 期望第一个参数使用正则表达式。或者选项元素不是您所期望的。 IE 可以将选项名称大写，并且可能会添加选定的属性。在尝试进行字符串替换之前，您应该提醒 innerHTML 以查看它是什么。然后我会使用一个有效的正则表达式来进行替换。您可能必须用反斜杠转义斜杠。我认为您不需要转义尖括号，但我不是 100% 的。

根据我的经验，DOM 方法（新选项）也较慢。当您必须替换大量选项时，速度会明显变慢。如果只需要替换一两个，可以使用DOM方法。

【讨论】：

终于有人直截了当地描述了我的问题（和解决方案）。谢谢！我很高兴，我要看看你的其他答案，看看有什么没有得到应有的支持。 . .

【参考方案4】：

我猜你用的是IE？问题是您必须使用 new Option(...) 在 IE 中填充 SELECT。像这样：

document.getElementsByTagName('select')[0].options[0]=new Option(' two ');

编辑：有一篇关于此错误的 Microsoft 知识库文章：http://support.microsoft.com/kb/276228

【参考方案5】：

我制定的解决方案如下

strHTML = "&nbsp;<option value=""1"">Text1</option>"
strHTML = strHTML + "<option value=""15"">Text2</option>"
strHTML = strHTML + "<option value=""17"">Text3</option>"


document.getElementById("id-selectbox").innerHTML=strHTML;
if(Browser=="Internet Explorer")
    document.getElementById("id-selectbox").outerHTML=document.getElementById("id-selectbox").outerHTML;

可以通过 AJAX 请求获取 HTML 字符串。

结果是浏览器将使用新添加的选项重写/呈现选择框。

注意：&nbsp 预测第一个选项代码 如果你忽略它，第一个选项将失去它的选项标签，因此不会显示在新添加的 select-innerHTML

【参考方案6】：

您正在使用 replace，它需要 RegEx 作为第一个参数。

试试这个：

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace(/<option> one <\/option>/, "<option> two </option>");

这对你有用吗？

【讨论】：

不，第一个参数也可以是子字符串。查看 W3C 规范。

【参考方案7】：

检查一下

document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ;

如果它不起作用，请更换浏览器。