如何获取包含值的输入控件的 innerHTML？答案

【问题标题】：How to get the innerHTML of an input control including the values?如何获取包含值的输入控件的 innerHTML？
【发布时间】：2013-01-16 11:22:04
【问题描述】：

我有一个 div，它叫做 tab1。 tab1 div 内部有许多输入（字段和单选按钮）。我得到这样的innerHTML：

document.getElementById("tab1").innerHTML;

示例代码：

<div id="tab1">
    <input type="text" id="text1" />
</div>

这行得通，但是如果我在 text1 输入中输入任何值，例如，它不在 innerHTML 中。我将如何获得包含输入值的 innerHTML？这可能吗？

谢谢！

【问题讨论】：

您可以直接引用这些输入。如果您发布更多代码（<div id="tab1"></div> 中的所有内容），解释起来会容易得多。
文本输入不是 html 代码的一部分。所以它不会显示在 innerHtml 中。
如何在不直接引用输入的情况下获取值？
为什么不只是隐藏/显示 div，而不是将内容从一个元素复制到另一个元素？对此的标准解决方案是每个选项卡隐藏/显示不同的元素，而不是移动 HTML 元素。我误解了这个问题吗？
如果您只需要选项卡 - 只需隐藏所有不可见的 div 并显示您需要的一个。 div.style.display = "none" - 隐藏元素，div.style.display = "block" 显示。并且无需复制内容。

标签： javascript innerhtml

【解决方案1】：

<div id="tab1">
    <input type="text" id="text1"
    onkeyup="javascript:this.setAttribute("value", this.value);"/>
</div>

这将给出带有 div 的 innerHTML 的值。

document.getElementById("tab1").innerHTML;

你可以相应地更改事件，我设置为onKeyUp。

【讨论】：

【解决方案2】：

如果您想获取输入/收音机的值，可以使用 jQuery：
var Inputs = $("div#tab1 input, div#tab1 radio");
您现在在变量 Inputs 中有一个包含所有输入和无线电的数组。然后您可以像这样访问这些值：Inputs[0].value
如果您想使用如下所示的纯 JavaScript：
var Inputs = document.getElementById("tab1").getElementsByTagName('input'); You can now access them like:Inputs[0].valueandRadios[0].value`
@编辑
谢谢，我纠正了这些错误。

【讨论】：

另外，没有标签“radio”。

【解决方案3】：

如果您在文本框中输入内容，innerHTML 是什么样的？是不是很像

    <input type="text" id="text1" value="your_value" />?

如果是这样，这里有一个简单的函数可以返回你想要的：

    function getInnerHtml() {
        var div = document.getElementById("tab1");
        var childNodes = div.childNodes;
        var innerHtml = "";
        for (var i = 0; i < childNodes.length; i++) {
            var node = childNodes[i];
            if (node.nodeType == 1) {
                if (node.getAttribute("type") == "text") {
                    if (node.value != "") {  
                        //! This will change the original outerHTML of the textbox
                        //If you don't want to change it, you can get outerHTML first, and replace it with "value='your_value'" 
                        node.setAttribute("value", node.value);
                    }
                    innerHtml += node.outerHTML;
                } else if (node.getAttribute("type") == "radio") {
                    innerHtml += node.outerHTML;
                }
            }
        }
    }

希望对你有帮助。

【讨论】：