通过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

回答

相关问题