<!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>
为什么却插到后面了?不知道哪错了!求大神帮忙!拜谢了!
<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个,其中有文本对象(空格)
<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>
个人见解,不知道对不对,哈哈