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

源自：9-13 插入节点insertBefore()

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

<!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 16:48

个回答

laughing888

2017-07-21 11:44:36

已采纳

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

1
慕粉2359383080

2017-07-18 21:18:03

一个包含在ul标签里面，一个在ul标签外面，所以结果不同

0