使用javascript动态添加和删除网页上的元素

Question

So I'm using Twitter Bootstrap to create a web page, and I'd like to use their "Alerts" class to dynamically create and dismiss alerts at the bottom of my page. Basically my web page is used to monitor a wireless data acquisition system, so I'd like to be able to dynamically display messages related to that system, ie "Warning, Sensor 1 is not responding", and then be able to dismiss it dynamically when the event has passed, or have the user dismiss it. I'm more of an embedded systems guy, and haven't done much web development, so I'm really not sure where to start. My first inclination would be to do something like this:

<div id="Alert1"></div>
<div id="Alert2"></div>
...

And create enough divs at the bottom of my page to display a reasonable number of messages, then dynamically change them in code with something like:

var Alert1 = document.getElementById("Alert1");
Alert1.className = "alert alert-warning";
$('#Alert1').html("Error: Unable to write to logfile");

I can't imagine that this is a very good way to do it, though, and I'd have to have some way to manage what divs were in use, etc. What is a better way to dynamically create and remove these elements?

Answer 1

Using jQuery you can use append to dynamically add an element to the page.

  <div class="alerts"></div>

In JavaScript:

   $(".alerts").append("<div id='alert1'>Warning</div>");

Similarly you can remove the element using the remove() function.

Answer 2

You don't need to create a <div> for any and all error messages you have. Just create one <div> and dynamically fill in the appropriate text (or HTML) of the currently active message.

Sample code:

// define this function globally
(function (exports) {

  var messages = {};
  function addMessage(type, msg) {
    if (typeof messages[type] === "undefined") {
      messages[type] = [];
    }
    messages[type].push(msg);
    render();
  }

  function render() {
    var html = "";
    for (type in messages) {
      if (messages.hasOwnProperty(type)) {

        for (var i=0, len=messages[type].length; i<len; i++) {
          html += type + ": " + messages[type][i];
        }
      }
    }
    $("#Alert").html(html);
  }
  exports.addMessage = addMessage;
})(window);

// somewhere in your code
addMessage("Error", "Unable to write to logfile");

It would be even better to declare "Error" as a constant/variable somewhere:

var ERR_ERROR = "Error";
var ERR_WARNING = "Warning";

Answer 3

You can define a template for your alerts, holding the message and the type of the message.

Then according to the type of the message you would append the message into the page.

Consider the following function

function addAlert(type, message) {
_.templateSettings.variable = "element";
var tpl = _.template($("#alertTemplate").html());
var tplData = {
    message: message,
    type: type
  };
$("#mainContainer").append(tpl(tplData));//the div or container where you want your messages to appear
}

And the template would be

<script type="text/html" id="alertTemplate">
    <div class = "alert alert-<%= element.type %>" > <%= element.message %> </div>
</script>

and of course the container of your alerts

<div id="mainContainer"> 

</div>

Then in your alert handler you would call addAlert with the appropriate parameters.

and to remove all the alerts

  $("#mainContainer").find('.alert').remove();

You can find working example at http://jsfiddle.net/hatemalimam/EpM7W/6/