Question

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

document.getElementById("tab1").innerHTML;

示例代码：

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

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

谢谢！

Answer 1

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

这将使用div的innerHTML给出值。

document.getElementById("tab1").innerHTML;

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

Answer 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:输入[0]。价值and收音机[0] .value`
@edit
谢谢，我纠正了这些错误。

Answer 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;
                }
            }
        }
    }

希望它有用。

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

3 个答案: