JavaScript 传递检索和传递输入信息 nodeValue 与 createTextNode答案

【问题标题】：JavaScript Passing retrieving and passing input info nodeValue vs createTextNodeJavaScript 传递检索和传递输入信息 nodeValue 与 createTextNode
【发布时间】：2016-08-08 18:27:22
【问题描述】：

我在 JavaScript 中遇到了一些我认为很奇怪的东西。我正在构建一个表单，其想法是提供按需添加表行和字段的能力。你可以想象我开始尝试createElement、appendChild等。

为什么当我尝试从输入字段传递一个值时，它不能直接附加并输出到div 标记？但是，当首先通过createTextNode 传递检索到的值然后输出它时，它可以工作。

控制台说连接 pat.appendChild(al) 不是对象

但是pat.appendChild(text) 工作正常吗？

<script type="text/javascript">

function appendTr (){

    var pat = document.createElement("p");
    /*var formValue = document.createTextNode("This works, but why doesn\'t the other one");
    p.appendChild(formValue);*/
    var al = document.getElementById("position").value;
    var text = document.createTextNode(al);
    pat.appendChild(text);
    document.getElementById("outer").appendChild(pat);
}

</script>
<form>
    <table id="job">
        <tr>
            <td><input id="y1" name="y1" type="text"></td>
            <td><input id="y2" name="y2" type="text"></td>
            <td><input id="position" name="position" type="text"></td>
            <td><input id="org" name="org" type="text"></td>
            <td><input class="button" id="addRow" type="button" value="+" onclick="appendTr()"></td>
            </tr>
    </table>

</form>
<div id="outer">Not</div>

【问题讨论】：

您能否提供一个 Jsfiddle 来演示该问题并告诉我们您使用的是什么浏览器？我无法复制您描述的“pat.appendChild(al) is not an object”错误。

标签： javascript appendchild nodevalue createtextnode

【解决方案1】：

al 是一个字符串，text 是一个节点。 appendChild 的参数必须是一个节点。

要将al 直接输出到 div 中，请执行以下操作：

document.getElementById("outer").textContent=al;

或者当您希望 al 中的 html 代码工作时：

document.getElementById("outer").innerHTML=al;

【讨论】：