使用javascript動態添加和刪除網頁上的元素

因此，我使用Twitter Bootstrap創建網頁，並且我想使用他們的「Alerts」類來動態創建和取消我的底部的警報頁。基本上我的網頁用於監控無線數據採集系統，所以我希望能夠動態顯示與該系統相關的消息，即「警告，傳感器1沒有響應」，然後能夠動態消除它當事件已經過去或者讓用戶解僱它時。我更像是一個嵌入式系統人員，並沒有做太多的web開發，所以我真的不知道從哪裏開始。我的第一個傾向是做這樣的事情：使用javascript動態添加和刪除網頁上的元素

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

而在我的網頁顯示消息的合理數量的底部，創造足夠的div，然後動態的東西，如改變他們在代碼：

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

雖然我不能想象這是一個很好的方法，但我必須有一些方法來管理正在使用的div等。什麼是更好的方式來動態創建和刪除這些元素？

來源

2013-12-15 IanM

使用jQuery，您可以使用append動態添加元素到頁面。

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

在JavaScript：

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

同樣可以使用remove()功能刪除元素。

來源

2013-12-15 16:44:53

您無需爲任何和所有錯誤消息創建<div>。只需創建一個<div>並動態填充當前活動消息的相應文本（或HTML）。

示例代碼：

// 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");

它甚至會更好，宣佈「錯誤」作爲常量/變量的地方：

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

來源

2013-12-15 16:45:04 ComFreek

工作的例子，我將能夠使用該方法有多個消息？即時：警告：傳感器1：間歇性數據包丟失警告：日誌文件接近大小限制錯誤：無法與傳感器2通信。每個消息都單獨被忽略嗎？ – IanM

@ user95788否，處於當前狀態的'changeMessage（）'總是覆蓋最後一條消息。您需要擁有一組消息。我會更新我的答案。 – ComFreek

@ user95788我已經更新了我的答案。現在唯一的問題是你無法隱藏特定的消息。解決方法是單擊消息觸發從數組中刪除特定的消息。（如果我比以前更困惑你，我很抱歉。） – ComFreek

您可以定義模板，您的提醒，抱着消息和消息的類型。

然後根據消息的類型將消息附加到頁面中。

考慮下面的函數

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 
}

而且模板將

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

，當然容器的警報

<div id="mainContainer"> 

</div>

然後在您的通知處理程序，你會打電話addAlert與適當的參數。

，並刪除所有的警報

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

你可以找到http://jsfiddle.net/hatemalimam/EpM7W/6/

來源

2013-12-15 17:13:37

使用javascript動態添加和刪除網頁上的元素

回答

相關問題