使用Javascript创建不同颜色的警报消息

<div id="alertContainer"></div>

// 创建警报消息
function createAlertMessage(message, color) {
  // 创建新的<div>元素
  var alertMessage = document.createElement('div');
  
  // 设置消息内容
  alertMessage.textContent = message;
  
  // 添加类名来设置样式
  alertMessage.className = 'alert-message ' + color;
  
  // 将警报消息添加到容器中
  var alertContainer = document.getElementById('alertContainer');
  alertContainer.appendChild(alertMessage);
}

/* 共同样式 */
.alert-message {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

/* 成功消息样式 */
.alert-success {
  background-color: #dff0d8;
  color: #3c763d;
}

/* 警告消息样式 */
.alert-warning {
  background-color: #fcf8e3;
  color: #8a6d3b;
}

/* 错误消息样式 */
.alert-danger {
  background-color: #f2dede;
  color: #a94442;
}

// 创建成功消息
createAlertMessage('操作成功！', 'alert-success');

// 创建警告消息
createAlertMessage('警告：请注意操作！', 'alert-warning');

// 创建错误消息
createAlertMessage('发生错误，请重试！', 'alert-danger');