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

我有一个div，它叫tab1。tab1 div中有许多输入字段和单选按钮。我得到的innerHTML如下所示：

document.getElementById("tab1").innerHTML;

示例代码：

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

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

---

谢谢

如果要获取输入/无线电的值，可以使用jQuery： var输入=$divtab1输入，divtab1无线电； 现在，在变量输入中有一个包含所有输入和收音机的数组。然后可以访问如下值：输入[0]。值 如果要使用如下所示的普通JavaScript： var Inputs=document.getElementByIdtab1.getElementsByTagName'input'； 您现在可以像这样访问它们：输入[0]。值和收音机[0]。值` @编辑

---

谢谢，我更正了这些错误。

如果您想获取输入/收音机的值，可以使用jQuery： var输入=$divtab1输入，divtab1无线电； 现在，在变量输入中有一个包含所有输入和收音机的数组。然后可以访问如下值：输入[0]。值 如果要使用如下所示的普通JavaScript： var Inputs=document.getElementByIdtab1.getElementsByTagName'input'； 您现在可以像这样访问它们：输入[0]。值和收音机[0]。值` @编辑

---

谢谢，我更正了这些错误。

如果在文本框中键入内容，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是什么样子的？它看起来像吗

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

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

如果是这样，下面是一个简单的函数，返回您想要的：

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

希望对你有帮助

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

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

---

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

您可以直接引用这些输入。如果你发布更多的代码，里面的所有内容都会更容易解释。文本输入不是html代码的一部分。因此它不会在innerHtml中显示。如何在不直接引用输入的情况下获取值？为什么不隐藏/显示div，而不是将内容从一个元素复制到另一个元素？标准解决方案是在每个选项卡上隐藏/显示不同的元素，而不是移动HTML元素。我是否误解了这个问题？如果你只需要制表符，只需隐藏所有不可见的div，并显示一个你需要的div。div.style.display=none-隐藏元素，并显示div.style.display=block。无需复制内容。您可以直接引用这些输入。如果你发布更多的代码，里面的所有内容都会更容易解释。文本输入不是html代码的一部分。因此它不会在innerHtml中显示。如何在不直接引用输入的情况下获取值？为什么不隐藏/显示div，而不是将内容从一个元素复制到另一个元素？标准解决方案是在每个选项卡上隐藏/显示不同的元素，而不是移动HTML元素。我是否误解了这个问题？如果你只需要制表符，只需隐藏所有不可见的div，并显示一个你需要的div。div.style.display=none-隐藏元素，并显示div.style.display=block。而且不需要复制内容。而且，没有标签收音机。而且，也没有标签收音机。