Question

我有一个Javascript / innerHTML问题。为了更容易理解，我写了这段代码：

<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/

Answer 1

如果你看一下Developer工具中的input元素，你会看到input元素是隐藏div元素的包装，所以当你改变input元素的值时，它会改变隐藏div元素的值，而不是属性。 / p>

如果要将一个元素的内容复制到另一个元素中，如果使用标准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)); 
    });
}

仅供参考：如果要复制元素，则不应向这些元素添加id属性，因为id应该是每个文档唯一的。相反，在克隆时添加类或更改id。

Answer 2

当您获得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

Answer 3

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

我尝试使用Node.cloneNode，但没有太多运气（可能是浏览器，Firefox，我正在使用）。然后经过大量的印刷语句测试，我想出了如何做提问者所要求的。

这非常简单：在你的onchange事件处理程序中，使用： e.target.setAttribute（＆＃34; value＆＃34;，e.target.value）;

所以它看起来像＆＃34;值＆＃34; input标记的属性与JS中的.value属性不同。一个是HTML，另一个必须是内部的。所以使用＆＃34; setAttribute＆＃34;更改HTML属性值。然后，您可以使用innerHTML属性访问并保存所有已更改的输入字段。

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

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

3 个答案: