用JavaScript在标签内生成HTML

Generating HTML within a tag by JavaScript

本文关键字：HTML 标签 JavaScript      更新时间：2023-09-26

如果我有一个html代码块，我想使用一个循环来生成<div item>并将其放在body标签中。我知道如何写一个脚本来写html。但是我怎么告诉我的脚本把它放在body标签?

我正在使用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>

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

不太理想的方式是:

document.write(...)

或. .

document.body.appendChild(...)

如果你使用的是jquery之类的东西，你可以这样做:

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

其中data为html:

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

试试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>

可以使用Node.appendChild

var element = document.createElement("div");
element.textContent = "some text";
document.body.appendChild(element);
在jsfiddle

首先，您需要允许您按类选择元素的函数。document.querySelectorAll应该做的伎俩，但它不支持在某些浏览器(如旧版本的IE)。

然后可以使用Node.appendChild函数移动所选元素。代码看起来像这样:

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

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