在script 标签内补充代码，实现创建一个新li标签，内容为"php",并将新创建的li插入到内容为HTML的标签前。
慕数据5775487
2016-09-14 21:11
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
for(var i=0;i<otest.length;i++){
if(otest[i].innerHTML=="HTML"){
var node=otest[i].childNodes;
}
}
var newnode=document.createElement("li");
newnode.innerHTML="php";
otest.insertBefore(newnode,node);
</script>
为什么却插到后面了？不知道哪错了！求大神帮忙！拜谢了！
2回答
-
- jidashen
- 2016-09-14 23:19:50
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test"); //获得的是ul标签对象，不是数组，可以添加下面一行代码
var otestArr = document.getElementById("test").childNodes;//获得存储<li>JavaScript</li>与<li>HTML</li>两个标签对象的数组，然后遍历数组，做下面修改
var node；
for(var i=0;i<otestArr.length;i++){
if(otestArr[i].innerHTML=="HTML"){
node =otestArr[i];
}
}
var newnode=document.createElement("li");
newnode.innerHTML="php";
otest.insertBefore(newnode,node);
这样结果就对了
JavaScript
php
HTML
另外如果<ul id="test"><li>JavaScript</li><li>HTML</li></ul> 不再写在一起，而是有空格，如下：
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
var otestArr = document.getElementById("test").childNodes;此时获得标签对象元素个数就会变为5个，其中有文本对象（空格）
-
- q_Amily
- 2016-09-14 23:04:18
<body>
<ul id="test"><li>JavaScript</li><li>hhh</li></ul><script type="text/javascript">
var otest = document.getElementById("test"); //这个获得的是ul这个对象，它不是一个数组，所以下面出现otest[i],我觉得这是不对的。for(var i=1;i<otest.length;i++){//这个for似乎是没有意义的，你可以把试着改动<li>HTML</li>,它仍然会出现php在最底部。我也没弄明白
if(otest[i].innerHTML=="HTML"){
var node=otest[i].childNodes;
}
}
var node=otest.childNodes[0];//把下划线部分换成这句就没问题了
var newnode=document.createElement("li");
newnode.innerHTML="php";
otest.insertBefore(newnode,node);
</script>
个人见解，不知道对不对，哈哈
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题