将 InnerHTML 文本的获取结果转换为元素答案

【问题标题】：Convert getted result of InnerHTML text to an element将 InnerHTML 文本的获取结果转换为元素
【发布时间】：2017-07-18 07:47:22
【问题描述】：

我有一些代码：

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

            ...

        </tbody>
    <table>

我想获取 myTdId td 元素的 innerHTML 并获取文本输入的值。有可能吗？

例如：

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

请帮帮我，谢谢...

编辑： 我无法访问输入文本！

【问题讨论】：

document.getElementById("myText").value,
Checkif THIS 帮助
输入值没有修改HTML标记，所以无法通过HTML获取值。
const a = document.querySelector('#myidid input'); console.log(a.value)
@Abhi 谢谢我的朋友

标签： javascript innerhtml

【解决方案1】：

使用 childNodes 导航怎么样？

它是一个包含元素节点的数组。

你的情况……

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

【讨论】：

【解决方案2】：

您可以在输入本身上添加 Id 吗？

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

        ...

    </tbody>
<table>

然后通过

访问它

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

或者通过标签访问它

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

【讨论】：

【解决方案3】：

另一种清晰的方法是在您的 HTML 中添加 id 或 class，这样您就可以轻松获得内部 value。

例如

HTML：

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

Javascript

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

jQuery 版本

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

希望这会有所帮助。

【讨论】：

【解决方案4】：

我认为您不需要在该元素上调用 innerHTML。您需要获取 id 为“myTdId”的 td 元素的子元素。为此，您可以使用

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

这应该可以让您获得 td 元素的值，而无需为 td 元素设置 id 或类。

我假设你在 td 中只有一个元素；

我没有测试代码，但它应该可以工作。

【讨论】：

【解决方案5】：

使用 getElementById 而不是在结果对象上使用 getElementBy_XXX 。如果您使用 getElementsByClassName 或 TagName ，您将获得子元素数组。

//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>

【讨论】：

【解决方案6】：

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

【讨论】：