                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

能不能看一下为什么这两种写法输出不同？

<!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");  
  var newli = document.createElement("li");
  newli.innerHTML="php";
  otest.insertBefore(newli,otest.lastChild);
  
</script> 

</body>
</html>

输出为

Javascript
php
HTML

代码改为

<ul id="test"><li>JavaScript</li>
<li>HTML</li>
</ul>

之后输出变成

Javascript
HTML
php

慕少6141436

2017-07-18

源自：JavaScript进阶篇 9-13

关注问题我要回答

663

操作

收起

2 回答

laughing888 回答被采纳 +3 积分
2017-07-21

你换行后如果你用的IE浏览器应该不会出现这问题。如果其他浏览器，<li>HTML</li>后面会有一个空白节点（虽然是空白的，但也是节点），otest.insertBefore(newli,otest.lastChild);，这里面会把空白节点当做lastChild，在空白节点之前插入，那么插入的节点仍然在HTML的后面。所以在示例里面将这么一串写在一行就是为了避免出现这个问题。

可以再复习一下9-8节，里面提到过空白节点。