JavaScriptで4つめのli要素を追加したいがうまくいかない

###前提・実現したいこと
JavaScriptでHTMLに4つ目のli要素を追加したいのですが、うまくいきません。
どこが間違っているか指摘願います。

###発生している問題・エラーメッセージ

ブラウザで確認しても3つだったリスト項目が4つになりません。

###該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>Lesson2 Sample Script</title>
6<script>
7  //ここにスクリプトを記述
8window.onload = function (){
9  var contents = document.
10getElementById('contents');
11  contents.innerHTML = '<url>' +
12  '<li>List item1</li>' +
13  '<li>List item2</li>' +
14  '<li>List item3</li>' +
15  '</ul>';
16  var li_element = document.createElement('li');
17  li_element.innerHTML = 'List item4';
18  var ul = document.querySelector('#contents> ul');
19  ul.appendChild(li_element);
20
21};
22</script>
23</head>
24<body>
25<div id="container">
26  <h1 class="title">見出し</h1>
27  <div id="contents"></div>
28</div>
29</body>
30</html>


###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答1件

ベストアンサー

js
1// contents.innerHTML = '<url>' +
2//                        ↓
3   contents.innerHTML = '<ul>' +
4```**動くサンプル：**[https://jsfiddle.net/nh0ts1gr/](https://jsfiddle.net/nh0ts1gr/)