如何在不传入第二个参数的情况下使用insertBefore()方法？

你提到看到文档说明insertBefore()的第二个参数是可选的：

该参数为要在其之前插入新节点的子节点。若未指定，insertBefore方法会将新节点插入到末尾。

但你运行这段代码时：

let li = document.createElement('LI'); 
li.appendChild(document.createTextNode("Water")); 
let list = document.getElementById('list'); 
list.insertBefore(li);

<ul id="list"> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul>

却遇到了报错：

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': 2 arguments required, but only 1 present.

而传入第二个参数的代码list.insertBefore(li, list.childNodes[0])却能正常运行，对吧？

这其实是因为文档里的“可选”表述容易造成误解——这里的“可选”并不是指你可以完全省略这个参数，而是指你可以传入null或undefined来表示将节点插入到父节点的子节点末尾。很多浏览器的DOM实现要求这个参数必须存在，完全不传的话就会触发类型错误。

解决方法很简单，只需要显式传入null作为第二个参数即可：

list.insertBefore(li, null);

另外补充一个小技巧：如果你本来的需求就是把节点添加到列表末尾，使用appendChild()会更直观，效果和insertBefore(li, null)是完全一致的：

list.appendChild(li);

内容的提问来源于stack exchange，提问作者Eugene Zalivadnyi