-1

如果我有一段 html 代码，我想使用循环来生成<div item>并将其放置在 body 标记中。我知道如何编写脚本来编写 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>
4

7 回答 7

5 
var div = document.createElement("div");
document.body.appendChild(div);
于 2013-05-03T19:03:59.907 回答
2

首先，您需要允许您按类选择元素的功能。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-03T19:08:16.810 回答
2

作为datahtml：

$('body').append(data);
于 2013-05-03T19:02:48.460 回答
2

那么不太理想的方法是：

document.write(...)

或者..

document.body.appendChild(...)

如果你使用类似 jquery 的东西，你可以这样做：

$('body').append(...)
于 2013-05-03T19:03:00.097 回答
2

试试 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-03T19:04:19.740 回答
2

您可以使用Node.appendChild

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

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

在jsfiddle 上

于 2013-05-03T19:04:27.373 回答
1

你可以遍历你的数组来创建你想要的 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 示例

JSFiddle jQuery 示例

于 2013-05-03T19:10:10.177 回答