Convert getted result of InnerHTML text to an element

Question

I have some code :

    <table>
        <tbody>
            <tr>
                <td id='myTdId'>
                    <input type='text' value='some value' />
                </td>
            </tr>

            ...

        </tbody>
    <table>

I want to get innerHTML of myTdId td element and get value of text input. Is it possible?

for example :

var tdInnerHTML = document.getElementById('myTdId').innerHTML;
// convert this to element operation and access to value of it ... 
console.log(tdInnerHTML.value); // :(

please help me, THANKS...

EDIT : I do not access to input text!

Checkif [THIS](https://stackoverflow.com/a/12166811/2968762) helps — Abhi, Jul 18 '17 at 07:49
The input value does not modify the HTML markup, so you can't get the value through the HTML. — H77, Jul 18 '17 at 07:50
`const a = document.querySelector('#myidid input'); console.log(a.value)` — Egor Stambakio, Jul 18 '17 at 07:52

dev8080 · Accepted Answer · 2017-07-18T08:09:31.987

3

How about using childNodes to navigate?

It is an array containing nodes of contained elements.

In your case...

var tdInputVal = document.getElementById('myTdId').childNodes[0].value;
console.log(tdInputVal ); // :(

edited Jul 18 '17 at 08:09

answered Jul 18 '17 at 07:52

dev8080

3,950
1
12
18

score 2 · Answer 2 · answered Jul 18 '17 at 07:52

Can you add Id on the input itself?

<table>
    <tbody>
        <tr>
            <td id='myTdId'>
                <input type='text' value='some value' id="myInput" />
            </td>
        </tr>

        ...

    </tbody>
<table>

Then access it via

var input = document.getElementById('myInput').value;

Or access it via tag

var input = document.getElementsByTagName("input")[0].value;

score 1 · Answer 3 · answered Jul 18 '17 at 07:52

Alternative clear way is to have id or class on your HTML so you can get inner value easily.

For example

HTML:

<input id="text-input" value="">

Javascript

var inputValue = document.getElementById('text-input').value;
console.log(inputValue);

jQuery version

var inputValue = $('#text-input').val();

Hope this helps.

score 1 · Answer 4 · answered Jul 18 '17 at 07:55

I dont think you need to call innerHTML on that element. You need to get child of the td element with id "myTdId". To do that you can use

var tdElement = document.getElementById('myTdId');
console.log(tdElement.children[0].value);

This should get you the value of the td Element without the need of setting id or class to the td element.

I am assuming you have only one element inside the td;

I did not test the code but it should work.

score 1 · Answer 5 · answered Jul 18 '17 at 08:04

Use getElementById than use on result object also getElementBy_XXX . If you use getElementsByClassName or TagName you will get array of child element.

//ELEMENT
var tdElement = document.getElementById('myTdId');

// INNER HTML
var tdInnerHTML = document.getElementById('myTdId').innerHTML;

var childElement = tdElement.getElementsByTagName("input");

//if td is only and always first element than we can use  : 
//childElement[0]

alert(childElement[0].value)

<table>
        <tbody>
            <tr>
                <td id='myTdId'>
                    <input type='text' value='some value' />
                </td>
            </tr>

       

        </tbody>
    <table>
    
    <script>
    
    //  I dont use this function but you can if you want
    function getElementInsideElement(baseElement, wantedElementID) {
    var elementToReturn;
    for (var i = 0; i < baseElement.childNodes.length; i++) {
        elementToReturn = baseElement.childNodes[i];
        if (elementToReturn.id == wantedElementID) {
            return elementToReturn;
        } else {
            return getElementInsideElement(elementToReturn, wantedElementID);
        }
    }
}
    
    </script>

score 1 · Answer 6 · answered Jul 18 '17 at 08:44

1

// Use querySelector
var input = document.querySelector('#myTdId input');
var val = input.value;

answered Jul 18 '17 at 08:44

max ivaneychyk

148
3

Convert getted result of InnerHTML text to an element

6 Answers6