Question

我有：

function edit(recRef)
{
var recID=recRef+'_what';
var x=document.getElementById(recID);
var y=(x.innerHTML);
alert(y);
x.innerHTML="<INPUT type='text' value="+y+" />";
}

原始的recID元素是一个带有字符串的TD [例如“这个字符串”]。

在调用编辑函数结束时，INPUT标记类型文本在TD标记内，但字符串被截断为仅第一个单词[例如在示例中，它显示“This”但不显示“This string”]。

更有趣的是，如果TD中的字符串在调用编辑后原来是空的，则INPUT标记上的值是单个正斜杠“/".

这里发生了什么？

Answer 1

您忘记了'值属性

x.innerHTML="<INPUT type='text' value='"+y+"' />";

Answer 2

请尝试使用此代码：

var recID = recRef+'_what';
var oRecord = document.getElementById(recID);
var sHTML = oRecord.innerHTML;
var oInput = document.createElement("input");
oInput.type = "text";
oInput.value = sHTML;
while (oRecord.childNodes.length > 0)
   oRecord.removeChild(oRecord.childNodes[0]);
oRecord.appendChild(oInput);

这将直接插入新的DOM元素，而不是弄乱文字HTML。

Answer 3

建立在Shadow的响应之上，下面是跨浏览器解决方案的样子

function edit(recRef) {
    var isIE/*@cc_on=1@*/;
    var el = document.getElementById(recRef);
    var input = document.createElement( isIE ? "<input type='text'>" : "input" );
    input.setAttribute("value",el.innerHTML)
    el.replaceChild(input,el.childNodes[0]);
}

将x.innerHTML设置为INPUT截断值字符串

3 个答案: