如何用JavaScript创建基础HTML/CSS编辑器？现有代码功能实现问询

我来帮你补全代码并实现这个功能，下面是完整的可运行方案，包含HTML、CSS和JavaScript三部分，点击按钮就能把输入的HTML和CSS代码实时渲染到指定区域：

<html>
<head>
<style>
textarea {
  width: 45%;
  height: 200px;
  background: #eee;
  margin: 0 2%;
  padding: 10px;
  font-family: monospace;
}
#content {
  margin: 20px;
  border: 1px solid #aaa;
  min-height: 200px;
  padding: 15px;
}
h1 {
  text-align: center;
  font-size: 20px
}
h2 {
  font-size: 18px;
  margin-left: 2%;
}
#renderBtn {
  display: block;
  margin: 15px auto;
  padding: 8px 20px;
  font-size: 16px;
  cursor: pointer;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
}
#renderBtn:hover {
  background: #45a049;
}
</style>
</head>
<body>
<h1>基础HTML/CSS编辑器</h1>

<h2>HTML 输入</h2>
<textarea id="htmlInput" placeholder="输入HTML代码，比如：&lt;h3&gt;Hello World&lt;/h3&gt;"></textarea>

<h2>CSS 输入</h2>
<textarea id="cssInput" placeholder="输入CSS代码，比如：h3 { color: blue; }"></textarea>

<button id="renderBtn">渲染效果</button>

<div id="content"></div>

<script>
// 获取页面元素
const htmlInput = document.getElementById('htmlInput');
const cssInput = document.getElementById('cssInput');
const renderBtn = document.getElementById('renderBtn');
const content = document.getElementById('content');

// 绑定按钮点击事件
renderBtn.addEventListener('click', function() {
  // 获取输入的代码
  const htmlCode = htmlInput.value;
  const cssCode = cssInput.value;
  
  // 将CSS和HTML组合后渲染到目标元素
  content.innerHTML = `<style>${cssCode}</style>${htmlCode}`;
});
</script>
</body>
</html>

关键功能说明 #

• 输入区域优化：给textarea添加了内边距和等宽字体，让代码输入更舒适；每个输入区都有占位提示，引导用户输入内容。
• 渲染逻辑解析：点击按钮时，我们把输入的CSS代码包裹在<style>标签里，和HTML代码拼接后，通过innerHTML插入到#content容器中。这样容器内的CSS会直接作用于内部的HTML元素，完美实现代码的带格式渲染效果。
• 交互体验提升：给按钮添加了悬停样式，让用户能清晰感知可点击状态；调整了#content区域的内边距，让渲染后的内容显示更美观。

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