使用javascript生成html标签

-1

我是网络开发新手，我想知道如何生成html标签并仅使用javascript更改内容。例如：使用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我只需要改变？图像文件的名称并显示网页上的所有图像。

非常感谢！

来源

2015-11-18 Michael Neumann

这是什么功能 - 避免重复代码。例如：

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');

注意，这个例子用字符串，而不是节点工程。

来源

2015-11-18 22:45:09 Shomz

首先，你得到你想要把这些标记插入

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>";

来源

2015-11-18 22:52:48 StijnvanGaal

的快速和肮脏的答案，这是你可以存储在一个数组和循环在他们的图像源的项目itterate，加入源字符串到预定义的标识，就像这样：

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/。

来源

2015-11-18 22:57:44 amoeba

使用javascript生成html标签

回答

相关问题