如何使用 javascript 将引导警报动态添加到页面？答案

【问题标题】：How can I dynamically add bootstrap alerts to a page using javascript?如何使用 javascript 将引导警报动态添加到页面？
【发布时间】：2020-02-15 22:27:24
【问题描述】：

我正在使用 Bootstrap 创建一个待办事项列表。 Here's how I'd like it to look。我已经创建了表单并且知道如何访问表单中的数据。

我不知道如何在单击提交按钮时使用 JavaScript 将警报动态添加到页面。我希望警报成为引导网格的一部分，并通过调整窗口大小相应地进行缩放。

我在下面使用的 HTML 是 Sheikh 对 JS 的回答的变体。我想我应该能够从这里弄清楚其余的。

function myAlert(task, days) {
  const wrapper = document.createElement('div');
  wrapper.innerHTML = 
  `<div class="alert alert-warning alert-dismissible fade show" role="alert">
    ${task}</br>${days}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
    </div>`;
  document.body.appendChild(wrapper);
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <!-- Script to add tasks-->
    <script src=scripts.js></script>

    <title>To-do list</title>
  </head>
  <body>
    <div class="container">

          <h1 style="text-align: center">Todo List</h1>

          <form name="form1" action="" onsubmit="event.preventDefault(); myAlert(document.getElementById('task').value, document.getElementById('days').value)">
              <div class="form-group">
                  <label for="task">Task</label>
                  <input id="task" class="form-control" type="text" name="task" required>
              </div>
              <div class="form-group">
                  <label for="days">Days To Complete</label>
                  <input id="days" class="form-control" type="text" name="task"  required>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
          </form>
          <hr/>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

【问题讨论】：

欢迎堆栈溢出，请发布您当前的代码进度，您尝试过的内容以及问题所在。 minimal reproducible example 可能会帮助您更好地描述您的问题
在我的原始帖子中添加了代码。

标签： javascript html twitter-bootstrap flexbox

【解决方案1】：

function myAlert(message){
var wrapper = document.createElement("div");
wrapper.innerHTML = '<div class="alert alert-info" role="alert">'+message+'</div>'
document.body.appendChild(wrapper);}

那就这样用吧

myAlert('This is a info alert')

【讨论】：