什麼是通過javascript向html添加元素的最簡單方法

看起來有很多方法可以做到這一點，但是，它們都不適合我。如果任何人都可以給我一個如何添加標籤並編輯它的屬性（無document.write亂七八糟）的例子，它適用於所有常見瀏覽器但是 IE，那就太棒了。
編輯
我根本不在乎它是否在IE中工作。如果確實如此，那很好，但我不喜歡IE，無論如何，我只會要求人們改變瀏覽器，因爲我創建的頁面上的其他內容在IE中不起作用。什麼是通過javascript向html添加元素的最簡單方法

來源

2012-06-15 Jacob

一個要求是它必須在IE中失敗？ – sachleen

那麼如果你願意嘗試jQuery，它有一個附加的方法，將這樣做 – theBigChalk

所有IE版本或特定版本？ – fcalderan

以下是如何創建<div>元素並將其添加到佈局的最簡單示例。

var el = document.createElement("div"); // creating element 
el.setAttribute("class", "myClass");  // setting attribute "class" 
el.innerHTML = "Text";     // adding text inside the element 
document.body.appendChild(el);   // appending new element to page body

DEMO：http://jsfiddle.net/XVaqY/

爲了使它不工作在IE中添加任何瀏覽器檢查。東西like that：

function isIE() { 
    return (navigator.appName == "Microsoft Internet Explorer"); 
}

來源

2012-06-15 15:19:42 VisioN

不幸的是，這在IE – Esailija

@Esailija的作品是的，我沒有注意到這種情況。聽起來很奇怪，但。 – VisioN

這是一個笑話:-) – Esailija

這裏是添加一個DIV使用JavaScript

http://jsfiddle.net/wp2Re/

<html> 
<head> 
    <title>Javascript Create Div Element Dynamically</title> 
    <style type="text/css"> 
     .dynamicDiv { 
      width: 200px; 
      height: 100px; 
      border: solid 1px #c0c0c0; 
      background-color: #e1e1e1; 
      font-size: 11px; 
      font-family: verdana; 
      color: #000; 
      padding: 5px; 
     } 
    </style> 

    <script type="text/javascript" language="javascript"> 

     function createDiv() { 
      var divTag = document.createElement("div"); 

      divTag.id = "div1"; 

      divTag.setAttribute("align", "center"); 

      divTag.style.margin = "0px auto"; 

      divTag.className = "dynamicDiv"; 

      divTag.innerHTML = "This HTML Div tag created " 
           + "using Javascript DOM dynamically."; 

      document.body.appendChild(divTag); 
     } 
    </script> 
</head> 
<body> 
    <p align="center"> 
     <b>Click this button to create div element dynamically:</b> 
     <input id="btn1" 
       type="button" 
       value="create div" 
       onclick="createDiv();" /> 
    </p> 
</body> 
</html>

來源

2012-06-15 15:20:21

首先的工作示例，您創建document.createElement()的元素，並將其保存到一個變量。此時它不在DOM中。然後，儘可能多地改變它的屬性，然後在你喜歡的任何點插入到DOM中。在我的示例中，它將在body標記的末尾插入一個DIV元素和id的elementid。

var newDiv = document.createElement("div"); 
newDiv.id = "elementid"; 
document.body.appendChild(newDiv);

來源

2012-06-15 15:20:49

這裏有一些方法來添加內容到DOM：

使用W3C推薦的方法：

var heading = document.createElement("h1"); 
heading.createTextNode("Foobar"); 
heading.className = "semantic-class-name-goes-here"; 
heading.setAttribute("aria-something-here", "bar");

使用的innerHTML：

document 
    .innerHTML("<h1 class='semantic-class-name-goes-here' aria-something-here='bar'>Foobar</h1>");

使用jQuery：

var heading = $("h1") 
    .addClass("semantic-class-name-goes-here") 
    .attr("aria-something-here", "bar"); 

$(document).append(heading);

來源

2012-06-15 15:27:26 Matt

假設你要排除所有IE版本，利用webreflection blog這一招，你可以做

if (!(!+"\v1")) { 
    var el = document.createElement("div");  
    ... 
    document.body.appendChild(el); 
}

另外，檢測IE另一個條件也可能是

if (!top.execScript) { ... }

甚至

var isIE = /*@[email protected]*/!1; 
if (isIE) { ... }

但說實話，他們對我來說是如此hacky。
無論如何，如果你指定了排除IE的技術原因，並告訴我們你想要完成什麼樣的功能，可能會給你一個更安全的方式來完成這項任務，基於特定的IE限制（功能檢測是比瀏覽器嗅探更好）。

來源

2012-06-15 15:40:14 fcalderan

什麼是通過javascript向html添加元素的最簡單方法

回答

相關問題