概要

javascript　を使用して動的にボタンの生成を行いたいのですが、表示できません。
Ubuntu + Firefox、Ubuntu + Chromium で表示ができませんでした。

また表示できない環境のコンソールにもエラーが出ませんでした。

修正方向の希望としましては、ソースかブラウザの設定を変更して、ボタンを表示できるようにしたいです。
（他のライブラリを導入しない、jsファイルは外だしのままにしておきたい）

以上、よろしくお願いします。

環境

Linux (Ubuntu 18.04　LTS)
FireFox 77.0.1 (64-bit)
Chromium 83.0.4103.106（Official Build）snap （64 ビット）

ソース

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>ほげほげ</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <script src="./js/main.js">
10  </script">
11</body>
12</html>

css/styles.css

css
1/* 追加ボタンの書式設定 */
2.addition {
3    display: flex;
4    margin: 10px auto;
5}

js/main.js

javascript
1{
2    // 追加ボタンをinputタグで作り、bodyタグの子要素に入れる
3    let key = 0;
4    const addButton = document.createElement('input');
5    addButton.classList.add('addition');
6    addButton.type = 'button';
7    addButton.value = '追加';
8    document.body.appendChild(addButton);
9}

確認方法

ローカルファイルの読み取りは、ブラウザの仕様上制限がかかっているとのことですので、
簡易webサーバ(=WEBrick)を立ち上げて、ブラウザでhttp://localhost:5000/に接続しております。

コマンド

$ cd [index.htmlのある場所]
$ ruby -run -e httpd . -p 5000

標準出力のログ

[2020-06-27 13:31:31] INFO  WEBrick 1.4.2
[2020-06-27 13:31:31] INFO  ruby 2.5.1 (2018-03-29) [x86_64-linux-gnu]
[2020-06-27 13:31:31] INFO  WEBrick::HTTPServer#start: pid=5063 port=5000
127.0.0.1 - - [27/Jun/2020:13:31:39 JST] "GET / HTTP/1.1" 304 0
- -> /
127.0.0.1 - - [27/Jun/2020:13:31:40 JST] "GET /js/main.js HTTP/1.1" 304 0
http://localhost:5000/ -> /js/main.js
127.0.0.1 - - [27/Jun/2020:13:31:40 JST] "GET /css/styles.css HTTP/1.1" 304 0
http://localhost:5000/ -> /css/styles.css