使用innerHTML时div中的旧输入文本值

我有Javascript/innerHTML问题。为了便于理解我写了这个代码：使用innerHTML时div中的旧输入文本值

<div id="testdiv_from"> 
<input type="text" id="text1" value="13"/> 
</div> 

<div id="testdiv_to"> 
</div> 

<input type="button" onclick="save();"/> 

<script> 
function save() { 
document.getElementById("testdiv_to").innerHTML = document.getElementById("testdiv_from").innerHTML; 
} 
</script>

我想将内容testdiv_from到testdiv_to复制。但是：如果我将输入文本元素的值从13更改为14，则新值不希望“伴随”。

你有什么想法如何转移新的输入文本值，而不是在div层内的旧的？使用innerHTML是错误的吗？

http://jsfiddle.net/r8z55/

来源

2014-01-31 Kristoffer

如果您查看开发人员工具中的输入元素，您会看到输入元素是隐藏div元素的包装，因此当您更改输入值时，它不会更改它的属性，而是更改该隐藏的div元素。 – Givi

有没有办法将更改后的值传输到其他div？ – Kristoffer

是的，有。看下面的答案。 – Givi

如果您在开发者工具看输入元素，你会看到，输入元素是隐藏的div元素的包装，所以当你改变输入的值元素，它改变了隐藏div元素的值，而不是一个属性。

如果您想将一个元素的内容复制到另一个元素中，如果您使用标准DOM属性/方法（如Node.cloneNode）会更好。

Demonstration

function save() { 
    var divTo = document.getElementById("testdiv_to"), 
     divFrom = document.getElementById("testdiv_from"); 
    // since, you said that you have multiple input elements that you want to copy, 
    // you should loop through each node and clone it. 
    [].forEach.call(divFrom.childNodes, function (node) { 
     // the difference between innerHTML and node.cloneNode(true) is that 
     // cloneNode with "deep copy", copies that hidden element too. 
     divTo.appendChild(node.cloneNode(true)); 
    }); 
}

FYI：如果要复制的元素，你不应该id属性添加到这些因素，因为id应该是每个文档唯一的。相反，克隆时添加课程或更改id。

来源

2014-01-31 14:22:09 Givi

当你拿到innerHTML属性（包括value=）随之而来。更改在输入中看到的值不会更改属性，只是属性。您可以事后虽然改变：

function save() { 
    var inp1 = document.getElementById("testdiv_to"), 
     inp2 = document.getElementById("testdiv_from"); 
    inp1.innerHTML = inp2.innerHTML; 
    inp1.getElementsByTagName('input')[0].value = inp2.getElementsByTagName('input')[0].value; 
}

JSFiddle

来源

2014-01-31 14:10:26 George

虽然这是一个老问题，但是这出现在我的搜索顶部，并且没有其他相关结果，所以我会在这里为未来的搜索者发布答案。

我试过使用Node.cloneNode，但没有多少运气（可能是浏览器，Firefox，我正在使用）。然后，经过大量的印刷陈述测试后，我想出了如何去做提问者的要求。这很简单：在你的onchange事件处理程序中，使用： e.target.setAttribute（“value”，e.target.value）;使用： e.target.setAttribute

所以看起来输入标签的“value”属性与JS中的.value属性不同。一个是HTML，另一个必须是内部的。因此，使用“setAttribute”更改HTML属性值。然后，您可以使用innerHTML属性访问并保存所有更改的输入字段。

编辑：哦，现在它有道理为什么Node.cloneNode没有帮助访问更改的输入字段。如果原始输入标签没有允许您访问新用户输入的已更改属性值，则克隆也不会。你只是在克隆旧的，不正确的属性值。

来源

2016-08-12 22:29:50 Marcos

使用innerHTML时div中的旧输入文本值

回答

相关问题