Question

我是网络开发的新手，我想知道如何使用javascript生成html标签并仅更改内容。例如：

<div class="row"> <div class="col-md-3 col-xs-6 portfolio-item"> <img class="img-responsive" src="myFolder/rta.jpg"> </div></div>

如何创建一个自动生成其他标签的循环，这样我就不需要一次又一次地复制和粘贴整个div？我只需要更改图像文件的名称并显示所有图像网页。

非常感谢！

Answer 1

这是函数的用途 - 避免重复代码。例如：

function buildDivs(image) {

  return '<div class="row">' +
         '<div class="col-md-3 col-xs-6 portfolio-item">' + 
         '<img class="img-responsive" src="' + image + '">' +
         '</div></div>';
}

然后只需调用函数：

buildDivs('myFolder/rta.jpg');

并且您将获得与示例中相同的结果字符串。

然后，当你需要另一张图片时，只需：

buildDivs('someFolder/anotherImage.jpg');

请注意，此示例适用于字符串，而不适用于节点。

Answer 2

首先，您要获取要将标记放入

的元素

var div = document.getElementById('Foo');

然后你可以在标签内设置html。你可以推送一串你想要的元素。

div.innerHTML = div.innerHTML + "<div class='row'>";

然后你只是想要添加你要添加的项目

for (srcItem in list){
    div.innerHTML = div.innerHTML + "<div class='row'>" +
    "<div class='col-md-3 col-xs-6 portfolio-item'>" +
    <img class='img-responsive' src='" + srcItem + "'>" +
    "</div></div>";

Answer 3

快速而肮脏的答案是，您可以将图像源存储在一个数组中并循环遍历它们，将源字符串添加到预定义标记中，如下所示：

var srcs = ['https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Popemobile_passes_the_White_House.jpg/300px-Popemobile_passes_the_White_House.jpg',
          'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Popemobil_Mai_2007.jpg/220px-Popemobil_Mai_2007.jpg',
          'https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Seat_Panda_1980-1985_Papamobil_Madrid_1982_frontright_2008-03-28_A.jpg/220px-Seat_Panda_1980-1985_Papamobil_Madrid_1982_frontright_2008-03-28_A.jpg'];


 for(var i = 0; i < srcs.length; i++){
    $('body').append('<img src="' + srcs[i] + '"/>');
 }

在这里演示：https://jsfiddle.net/ojk0s966/

但是，如果你打算做很多这样的事情，它会变得相当笨拙。在这种情况下，您最好使用为模板制作的内容，例如http://handlebarsjs.com/。

使用javascript生成html标记

3 个答案: