单击时追加新容器

Appending new container on click

本文关键字：新容器 追加 单击      更新时间：2023-09-26

我正在尝试学习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_content的变量中，然后将html值设置为html_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.');

如果你想要一个不同的值，你可以使用变量

您可以使用.clone()并创建它的副本，然后遍历克隆对象并更改您需要的内容:

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

演示概念:http://jsfiddle.net/H9DnA/1/

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

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

然后将它与一些相关的匹配对象合并并插入到您的文档中:

{ name: 'Image Name', 
  url: 'http://example.com', 
  imageUrl: 'http://example.com/image.jpg', 
  description: 'Description', 
  comments [ { text: 'Comment' } ] 
}

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.
    }
}

我想这会很好:

$('#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").append(html);行

相关文章：