ノードの置換が出来ません。

ノードの置換をしたく置換ボタンを押しても変化が見られません。
下記のようなエラーがでます。
replace_child.js:17 Uncaught TypeError: Cannot read property 'parentNode' of null
at replace (replace_child.js:17)
at HTMLInputElement.onclick (replace_child.html:11)

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>ノードの置換</title>
6  </head>
7  <body>
8    <ul>
9      <li　id="oldList">古い要素です</li>
10    </ul>
11    <input type="button" value="置換" onclick="replace()">
12        <script src="js/replace_child.js"></script>
13  </body>
14</html>

JavaScript
1function replace() {
2var newList = document.createElement('li');
3newList.setAttribute('id', 'newList');
4var newText = document.createTextNode('新しい要素です');
5newList.appendChild(newText);
6var oldList = document.getElementById('oldList');
7var parentNode = oldList.parentNode;
8parentNode.replaceChild(newList, oldList);
9}
10

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

回答2件

ベストアンサー

1つ考えられる問題として、<li　id="oldList">に全角スペースが入っているために、id属性が正しく認識されない可能性が揚げられます。

投稿2019/09/25 14:04

maisumakun

総合スコア145975

課題はmaisumakunさんの指摘のとおりだと思います

ちなみにoldListは一度置換すると消えてしまうので
所在チェックをしたほうがよいでしょう

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#replace').addEventListener('click',()=>{
4    var newList = document.createElement('li');
5    newList.setAttribute('id', 'newList');
6    var newText = document.createTextNode('新しい要素です');
7    newList.appendChild(newText);
8    var oldList = document.getElementById('oldList');
9    if(oldList){
10      oldList.parentNode.replaceChild(newList, oldList);
11    }
12  });
13});
14</script>
15<ul>
16<li id="oldList">古い要素です</li>
17</ul>
18<input type="button" value="置換" id="replace">