클릭시 새 컨테이너 추가

Question

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 설정? 이것이 일반적인 방법인가, 아니면 더 좋은 방법인가? jQuery를에

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

Answer 1

당신은 단지에 추가 APPEND() 함수를 사용해야합니다 :

편집

여기에 자바 스크립트입니다, 나는 현재 뭘하는지의 더 나은 아이디어를 제공하려면 무언가에.

당신이 좋아하는 뭔가를 할 수

...

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

을하고 다른 값을 원하는 곳에 당신이 변수를 사용할 수 있습니다.

Answer 2

당신은 .clone()를 사용하고이 복사본을 만든 다음 복제 된 개체를 통해 반복하고 당신이 필요로 변경할 수 있습니다

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

:

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

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

은 당신이 할 수있는 이미지 소스를 변경하려면 피어링 컨셉 demoying : http://jsfiddle.net/H9DnA/1/

Answer 3

JavaScript templating 라이브러리를 탐색하는 것이 유용 할 수 있습니다.

<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' } ] 
} 

Answer 4

필수 아이디어는 마크 업의 템플릿을 만들 것입니다 :

$('#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 
}); 

코드에서 테스트를 실행하지 않았으므로 어딘가에 오류가있을 수 있습니다. 당신은 나는 개인적으로이 자바 스크립트를 사용하지 것이다, 그렇게하는 방법에는 여러 가지가이 동적 인 방식으로 수행하는 방법을 의미하는 경우 내 팅겨 루프

Answer 5

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. 

    } 

}