如何使用innerHTML在代码中实现文本居中对齐？

我正在开发一个基于HTML、CSS和JavaScript的笑话网站，刷新页面就能显示新笑话。目前我用document.write()来显示笑话，但没法让文本居中优化排版。查资料知道可以用innerHTML，但不知道怎么在现有代码里应用，求帮助。

以下是我的代码：

JavaScript代码 #

let jokes = [`I just got my doctor's test results and I'm really upset about it. Turns out, I'm not gonna be a doctor.`,
  `My grief counselor died. He was so good, I don’t even care.`,
  ` Today, I asked my phone “Siri, why am I still single?” and it activated the front camera.`,
  // 省略其余笑话内容...
  `I was shocked when I found out my toaster was not waterproof.`]

let item = jokes[Math.floor(Math.random() * jokes.length)];

let a = document.getElementById
document.write(item)

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Jokes</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>
    Best jokes collection
  </h1>
  <div id="first"><i>Wanna hear a joke</i></div>
  <div id="second"><a href="#">Refresh</a> for more</div>

  <script src="script.js"></script>
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
</html>

CSS代码 #

h1{
  color: red;
  text-align: center;
  font-size: 60px;
}
#first{font-size: 40px;
       font-weight: 20px;
       text-align: center;
font-style: italic;
}
#second{
  margin: 100px;
  text-align: center;
  font-size: 20px;
}
#second a{
  text-decoration: none;
}

步骤1：在HTML中添加笑话容器 #

在<div id="second">上方新增一个带ID的容器，专门用来存放笑话：

<div id="joke-container"></div>

步骤2：修改JavaScript代码替换document.write() #

删掉无效的let a = document.getElementById，改用innerHTML把笑话插入到新增容器中：

let jokes = [/* 你的笑话数组内容 */];
let item = jokes[Math.floor(Math.random() * jokes.length)];

// 获取笑话容器元素
const jokeContainer = document.getElementById('joke-container');
// 将笑话内容插入容器
jokeContainer.innerHTML = item;

步骤3：给笑话容器添加居中样式 #

在CSS里新增#joke-container的样式，实现文本居中并优化排版：

#joke-container {
  text-align: center;
  font-size: 28px;
  margin: 40px auto;
  padding: 0 20px;
  max-width: 800px;
  line-height: 1.5;
}

修改后的完整代码 #

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Jokes</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>Best jokes collection</h1>
  <div id="first"><i>Wanna hear a joke</i></div>
  <div id="joke-container"></div>
  <div id="second"><a href="#">Refresh</a> for more</div>

  <script src="script.js"></script>
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
</html>

JavaScript

let jokes = [`I just got my doctor's test results and I'm really upset about it. Turns out, I'm not gonna be a doctor.`,
  `My grief counselor died. He was so good, I don’t even care.`,
  ` Today, I asked my phone “Siri, why am I still single?” and it activated the front camera.`,
  ` A man wakes from a coma. His wife changes out of her black clothes and, irritated, remarks, “I really cannot depend on you in anything, can I!”`,
  // 保留所有笑话内容...
  `I was shocked when I found out my toaster was not waterproof.`]

let item = jokes[Math.floor(Math.random() * jokes.length)];
const jokeContainer = document.getElementById('joke-container');
jokeContainer.innerHTML = item;

CSS

h1{
  color: red;
  text-align: center;
  font-size: 60px;
}
#first{
  font-size: 40px;
  font-weight: 20px;
  text-align: center;
  font-style: italic;
}
#joke-container {
  text-align: center;
  font-size: 28px;
  margin: 40px auto;
  padding: 0 20px;
  max-width: 800px;
  line-height: 1.5;
}
#second{
  margin: 100px;
  text-align: center;
  font-size: 20px;
}
#second a{
  text-decoration: none;
}

修改后，笑话会显示在居中的容器里，排版更规整，同时避免了document.write()可能会清空页面的问题。

内容的提问来源于stack exchange，提问作者Abhilasha Tripathi