How to get the innerHTML of an input control including the values?

问题

I have a div, its called tab1. Inside the tab1 div are many inputs (fields and radio buttons). I am getting the innerHTML like this:

document.getElementById("tab1").innerHTML;

Example code:

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

That works, but if I entered any value into a text1 input for example, its not in the innerHTML. How would I get the innerHTML including the entered values? Is that possible at all?

Thanks!

回答1:

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

This will gives the values with div's innerHTML.

document.getElementById("tab1").innerHTML;

You can change the event accordingly, I set it onKeyUp.

回答2:

If you want to get the values of inputs/radios, you can do it with jQuery:
var Inputs = $("div#tab1 input, div#tab1 radio");
You now have an array of all input and radios in the variable Inputs. You can then access the values like this: Inputs[0].value
If you want to use plain JavaScript that could look like this:
var Inputs = document.getElementById("tab1").getElementsByTagName('input'); You can now access them like:Inputs[0].valueandRadios[0].value`
@edit
Thanks, I corrected these mistakes.

回答3:

If you type something in the textbox, what does the innerHTML look like? Does it look like

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

If so, here is a simple function that returns what you want:

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

Hope it's helpful.

来源：https://stackoverflow.com/questions/14357222/how-to-get-the-innerhtml-of-an-input-control-including-the-values

标签

javascript

innerhtml