Javascript 单击添加新容器

我正在尝试学习HTML和Javascript/jQuery。如果我有一个容器，其中包含一个标题、一个图像、一个描述和一个数字，那么我想创建一个具有完全相同格式的新容器，除了值不同之外，这通常是如何实现的

这是我在每个项目中寻找的格式的一个示例

    <li>
        <div>
            <div>
                Image Name
            </div>
            <div>
                <a href=URL>
                    <img src='image_url'>
                </a>
            </div>
            <div>
                Description
            </div>
            <div>
                num_comment Comments
            </div>
         </div>
    </li>

我是否只是创建一个字符串并与图像的实际值连接，然后将该字符串添加到我保存的名为html\u content的变量中，然后将html值设置为html\u content？这是常见的方法还是有更好的方法

编辑

为了更好地了解我目前正在做什么，下面是javascript：

    var html1 = '<li><div><div>';
    var html2 = '</div><div><a href="';
    var html3 = '"><img src="';
    var html4 = '"></a></div><div>';
    var html5 = '</div><div>';
    var html6 = '</div></div></li>';


  function render(pics){
    for (var i in pics){
      html = html + html1 + pics[i].name + html2 + pics[i].image_url + html3 + ...
    };
    $('pics').html(html);
  }

---

在jQuery中，您只需要使用append函数来添加一些内容

你可以做一些像

$('select element').append('<li><div>....etc.');

在需要不同值的地方，可以使用变量。

可以使用。克隆并创建该值的副本，然后迭代克隆对象并更改所需内容：

var $objClone = $("li").clone(true);

$objClone.find("*").each(function() {
    //iterates over every element. customize this to find elements you need.
});

要更改图像源，可以执行以下操作：

$objClone.find("img").attr("src", "new/img/here.jpg");

---

Fiddle演示这个概念：

您可能会发现探索一些JavaScript库非常有用。基本思想是创建标记的模板：

<li>
    <div>
        <div>
            {{name}}
        </div>
        <div>
            <a href="{{url}}">
                <img src="{{imageUrl}}">
            </a>
        </div>
        <div>
            {{description}}
        </div>
        <div>
            {{comments}}
        </div>
     </div>
</li>

---

我认为这样做很好：

$('#button').click(function () {

    var html1 = '<li><div><div>';
    var html2 = '</div><div><a href="';
    var html3 = '"><img src="';
    var html4 = '"></a></div><div>';
    var html5 = '</div><div>';
    var html6 = '</div></div></li>';

    function render(pics){
        for (var i in pics){
            html = html + html1 + pics[i].name + html2 + pics[i].image_url + html3 + ...
            $("ul").append(html);
        }
    }
    // call render
});

---

我没有对您的代码进行测试运行，因此可能在某个地方出错。我的调整添加了这一行$ul.appendhtml；在您的循环中

如果您指的是如何以动态方式完成此操作，那么有许多不同的方法，我个人不会为此使用javascript。我将使用PHP，创建一个循环结构，以另一种方式从目录和其他数据中提取图像。取决于你的应用程序是什么。这些盒子将放在什么样的页面上？里面会有什么？他们会设置高度和宽度吗？渲染函数似乎不会附加生成的html内容，因为每次迭代pics数组时，都会分配新的html内容，从而覆盖旧内容。你不应该连接吗？

function render(pics)
{
    var theList = document.getElementByid("LIST ID");

    for (var i in pics){

      var listItem = document.createElement('li');  // Create new list item

      var nameDiv = document.createElement('div');  // Create name DIV element
      nameDiv.innerHTML = pics[i].name;             // Insert the name in the div

      var img = document.createElement('img');      // Create Img element
      img.setAttribute('src',pics[i].src);          // Assign the src attribute of your img

      var imgDiv = document.createElement('div');   // Create Img Div that contains your img
      imgDiv.appendChild(img);                      // Puts img inside the img DIV container

      var descDiv = document.createElement('div');  // Create Description DIV
      descDiv.innerHTML = pics[i].description;      // Insert your description



      listItem.appendChild(nameDiv);                // Insert all of you DIVs 
      listItem.appendChild(imgDiv);                 // inside your list item 
      listItem.appendChild(descDiv);                // with appropriate order.

      theList.appendChild(listItem);                // Insert the list item inside your list.

    }

}

function render(pics)
{
    var theList = document.getElementByid("LIST ID");

    for (var i in pics){

      var listItem = document.createElement('li');  // Create new list item

      var nameDiv = document.createElement('div');  // Create name DIV element
      nameDiv.innerHTML = pics[i].name;             // Insert the name in the div

      var img = document.createElement('img');      // Create Img element
      img.setAttribute('src',pics[i].src);          // Assign the src attribute of your img

      var imgDiv = document.createElement('div');   // Create Img Div that contains your img
      imgDiv.appendChild(img);                      // Puts img inside the img DIV container

      var descDiv = document.createElement('div');  // Create Description DIV
      descDiv.innerHTML = pics[i].description;      // Insert your description



      listItem.appendChild(nameDiv);                // Insert all of you DIVs 
      listItem.appendChild(imgDiv);                 // inside your list item 
      listItem.appendChild(descDiv);                // with appropriate order.

      theList.appendChild(listItem);                // Insert the list item inside your list.

    }

}