javascript给html添加结点操作

    如上代码，展现出来是

    如果想通过Add some text to the page 按钮给页面添加1些内容，那该如何操作呢？

    给Add some text to the page 按钮的单击事件绑定1个操作，让这个操作去给页面添加内容。

结点后添加 appendChild

获得要添加内容

    添加哪里的内容呢？姑且，我们就先添加按钮上方的输入框中的内容吧。

    var inText =document.getElementById("contentArea").value;

    getElementById 方法获得到的是contentArea 这个id指向的对象，即页面上面的文本输入域。

将内容放在文本结点中

    拿到值以后该怎样办呢？需要创建1个文本节点，将内容接收。

    var newText =document.createTextNode(inText);

    拿到的文本节点后，还没法将其显示在页面上。

将文本结点放在段落中

    这时候候还需要将它作为段落内容添加在页面的节点上。段落内容，那先创建1个段落吧。

    var newGraf =document.createElement("p");

    这行代码创建了1个空的段落行，里面还没有内容。

    段落对象中，有1个方法，叫做appendChild，是将文本节点信息绑定在段落上面的。

    newGraf.appendChild(newText);

将段落挂载在页面依附点上

    好了，内容绑定到段落上面了，但是段落似乎还是没有找到依附点啊。

    我们就先把段落挂在form表单后面吧。如果form表单有id属性的话（假定其id为form1），我们就能够通过

var docForm = document.getElementById("form1"); 来获得到form，但是form没有id属性；假设form有name属性的话，我们也能够通过getElementsByName拿到同名的form数组，然后获得到我们需要的form，不巧，name属性也没有。

    这时候，从哪里作为突破口呢？

    获得document中对象的经常使用方法有3个，其中1个是通过tagName来获得的。tagName获得对象时既不需要id属性，也不需要name属性，而是直接通过标签名称来获得对象的。

    这里我们就通过form标签名来获得form对象。

    document.getElementsByTagName("form")这个可以了吗？噢，忘了，通过tagName获得到的结果集是集合，是该标签名对象的集合，我们要获得的form是第几个呢？

    第1个，那集合中就是第0个了，即document.getElementsByTagName("form")[0]。

    好了，那我们的代码就是var docForm = document.getElementsByTagName("form")[0];

    拿到段落要挂载的依附点后，需要将段落挂载在依附点上。

    这时候，需要再次用appendChild方法了，即 docForm.appendChild(newGraf)。

    整理后的完全代码为：

结点前添加insertBefore

    继续上面的代码，如果想把内容添加在form表单前面呢？

    变动比较小，将docForm.appendChild(newGraf);

    换为document.body.insertBefore(newGraf, docForm); 就能够了。

    document.body 指的是document对象的body子对象，即html页面上面的body标签域。

    insertBefore 方法与 appendChild 方法不同：appendChild方法传递1个参数，由依附点来调用，传递要挂载的段落；insertBefore 方法由document.body调用，传递两个参数，要挂在的段落内容 和 挂载的依附点名称，第1个参数为包括要添加内容的段落，第2个参数为依附点，行将第1个参数的段落插在第2个参数对象之前。

    总结1下给html页面添加结点内容信息的步骤：

    1 获得要添加的内容

    2 将内容放在文本节点中

    3 将文本节点放在段落中

    4 将段落挂在页面的依附点上

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠