通過JavaScript在標籤內生成HTML

-1

如果我有一段html代碼，我想使用一個循環來生成<div item>並將它放在body標籤中。我知道如何編寫一個腳本來編寫html。但是，我如何告訴我的腳本將其放置在身體標記中？通過JavaScript在標籤內生成HTML

我正在使用Boostrap我也對jQuery和純js解決方案都開放。

<body> 
<div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="../assets/img/examples/slide-01.jpg" alt=""> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>Example headline.</h1> 
       <p class="lead">vehicula ut id elit.</p> 
      </div> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="../assets/img/examples/slide-03.jpg" alt=""> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <p class="lead">ies vehicula ut id elit.</p> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
<body>

來源

2013-05-03 kun

好了不太理想的方式是：

document.write(...)

或..

document.body.appendChild(...)

如果你正在使用的東西像jquery y OU可以這樣做：

$('body').append(...)

來源

2013-05-03 19:03:00 Gabe

這一直是我見過的答案中最外交的選擇： D +1 – Xotic750 2013-05-03 20:13:39

隨着data作爲HTML：

$('body').append(data);

來源

2013-05-03 19:02:48

的JavaScript和jQuery已經成爲互換這幾天的jsfiddle例子... – raidenace 2013-05-03 19:03:17

@Raidenace他把它標記爲bootstrap，我相信這取決於jquery – 2013-05-03 19:03:48

@ Jean-BernardPellerin是的，任何Javascript功能都必須依賴於jQuery。我認爲CSS不會，不確定 – Ian 2013-05-03 19:04:51

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

來源

2013-05-03 19:03:59 Andreas

嘗試jQuery的.append 這裏有一個鏈接....

http://api.jquery.com/append/

使用只有JavaScript：

<div id="div1"> 
<p id="p1">This is a paragraph.</p> 
<p id="p2">This is another paragraph.</p> 
</div> 

<script> 
var para=document.createElement("p"); 
var node=document.createTextNode("This is new."); 
para.appendChild(node); 

var element=document.getElementById("div1"); 
element.appendChild(para); 
</script>

來源

2013-05-03 19:04:19

如果OP無法使用jquery，該怎麼辦？ – Gabe 2013-05-03 19:05:03

@Gabe然後他們不會使用Twitter Bootstrap ... – Ian 2013-05-03 19:05:17

仍然問題標記爲JavaScript。 – Gabe 2013-05-03 19:06:19

您可以使用Node.appendChild

var element = document.createElement("div"); 

element.textContent = "some text"; 
document.body.appendChild(element);

在jsfiddle

來源

2013-05-03 19:04:27 Xotic750

首先，您需要功能，可以選擇由類元素。 document.querySelectorAll應該做的伎倆，但它不支持一些瀏覽器（例如舊版本的IE）。

然後您可以使用Node.appendChild功能移動選定的元素。代碼將如下所示：

var items = document.querySelectorAll("div.item"), i; 
for (i = 0; i < items.length; i++) { 
    document.body.appendChild(items[i]); 
}

來源

2013-05-03 19:08:16

您可以遍歷數組以創建您想要的div。下面的例子顯示了獲取body標籤並創建div，然後將它們添加到body。你也可以做一些事情，比如設置innerHTML和你想要的任何屬性。

var createDivs = function() { 
    var body = document.body; 
    for(var i = 0, l = 10; i < l; i++) 
    { 
     var div = document.createElement('div'); 
     div.innerHtml = 'Some Text'; //set inner html of the div 
     div.setAttribute('class', 'testClass'); //set attributes of the div 
     body.appendChild(div); 
    } 
}

下面是一個例子的jsfiddle：

JSFiddle

如果你使用jQuery，您可以通過以下方式做到這一點。

var createDivs = function() { 
    var myArray = [1,2,3,4,5,6,7,8,9,10]; 
    var body = $('body'); 
    $.each(myArray,function(index, value) { 
     body.append($('<div class="testClass" id="' + index + '">Some Text</div>')); 
    }); 
}

這裏是一個

JSFiddle jQuery Example

來源

2013-05-03 19:10:10 DSlagle

通過JavaScript在標籤內生成HTML

回答

相關問題