2 willerfu Willerfu 于 2016.02.24 14:47 提问

js appendChild 添加节点没有效果

想试下js里 appendChild()添加节点,结果没有反应,不知道问题处在哪里,火狐IE都没有效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>演示</title>
</head>

<script type="text/javascript">

    var node=document.createElement("li"); //创建一个li节点

    var textnode=document.createTextNode("Water"); //创建一个文本节点内容

    node.appendChild(textnode); //将文本节点内容,添加到li节点里面

    document.getElementById("test").appendChild(node); //将li节点,添加到test几点下面

</script>
<body>
    <ul id="test"><li>Coffee</li><li>Tea</li></ul>
</body>
</html> 

4个回答

qq_28088659
qq_28088659   2016.02.24 15:14
已采纳

html执行代码是按顺序执行的,js代码在body前,所以js执行时,body还没有。这样的话添加元素是无法完成的。
解决办法:

法一:
将js代码放在

qq_28088659
qq_28088659   2016.02.24 15:17

html执行代码是按顺序执行的,js代码在body前,所以js执行时,body还没有。这样的话添加元素是无法完成的。
解决办法
法一:
将js代码放在body后面

法二:
给body加一个onload事件,将js代码放在该事件处理函数中即可。

Willerfu
Willerfu 谢谢
2 年多之前 回复
showbo
showbo   Ds   Rxr 2016.02.24 15:31
     <ul id="test"><li>Coffee</li><li>Tea</li></ul>
    <script type="text/javascript">

        var node = document.createElement("li"); //创建一个li节点

        var textnode = document.createTextNode("Water"); //创建一个文本节点内容

        node.appendChild(textnode); //将文本节点内容,添加到li节点里面

        document.getElementById("test").appendChild(node); //将li节点,添加到test几点下面

</script>
liuyan19891230
liuyan19891230   2016.02.25 08:38

将js代码放在window.onload = function(){}中。
这样才会在DOM树加载好之后,开始执行函数中的内容。

Willerfu
Willerfu 谢谢 ,明白了
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
JS插入节点的方法appendChild、insertBefore
html 1 2 3 js function insert(){ var div2 =document.getElementById("div2"); var newNode =document.createElement("div"); newNode.innerText="插入div2"; // div2.appendChild(
appendChild() , insertBefore()插入节点需注意的问题
使用appendChild()和insertBefore()插入节点都会返回给插入的节点,//由于这两种方法操作的都是某个节点的子节点,所以必须现取得父节点,代码中 someNode 表示父节点 //使用appendChild()方法插入节点 var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNod
文档技术手册 xml 介绍xml 用法详细解释,chm格式,getElementsByTagname() ,添加节点 - appendChild()
xml技术文档 getElementsByTagname() ,添加节点 - appendChild()
form中appendChild失效的问题
本来今天在写一个算是比较简单地队列效果,本来打算两个小时搞定,然并卵,加找问题出现的原因,查资料,复习正则,一共写了将近五个小时,狗带。 其实代码结构是非常简单地,如下 <form> <fieldset> <legend>插入</legend> <input type="text" id="inputNum" placehold
DOM动态添加HTML节点 appendChild、removeChild
1、函数语法 createElement(name):方法可创建元素节点,此方法可返回一个 Element 对象。 appendChild(node):方法在指定元素节点的最后一个子节点之后添加节点,该方法返回新的子节点。 nodeObject.removeChild(node):方法可从子节点列表中删除某个节点。 elementNode.childNodes:属性返回包含被选
《JavaScript学习笔记》:DOM_添加节点、删除节点、文档碎片
《JavaScript学习笔记》:DOM_添加节点、删除节点、文档碎片在上篇博文中,主要介绍了关于DOM中获取子节点的相关知识点,除了获取子节点,DOM还有创建一个节点、加入节点、删除节点等知识点,本篇博文进行介绍。1、加入节点语法:obj.appendChild(obj1);//就是在对象obj尾部中加入节点obj1.看下面这个例子:往ul中添加li节点<!DOCTYPE html PUBLIC
js之DOM操作(插入节点appendChild())
插入节点appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点。 语法: appendChild(newnode) 参数: newnode:指定追加的节点。 demo: 无标题文档 JavaScript HTML var otest = document.getElementById("test"); va
Ext Tree新增节点
前两天做Ext Tree新增节点时花了好长时间才成功在树上增加了新节点,现把Ext Tree新增节点的过程记录下来,作为记念。 1、  创建目录结构如下 2、  然后分别创建控制器、model、store、view文件,完成之后文件内容如下 3、  创建树本身没有什么难度,按Ext例子做就可以了。 4、  在新增树节点时,我无论是调用parentNode.appendChild(n
javascript中innerHTML和appendChild的比较
https://zhidao.baidu.com/question/98239153.html
javascript 插入节点appendChild()
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点。语法: appendChild(newnode) 参数: newnode:指定追加的节点。在script标签内,为ul添加一个li,设置li内容为PHP。<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/h