나는 다음과 같은 한 방법 자바 스크립트를 배열 정보를 추출하고

Question

처음 DOM 요소에 삽입 :

<ul id="my_List"> 
... 
</ul> 

자바 스크립트를 사용하여, 나는 텍스트 정보에 대한 값을 사용하는 UL 블록 내에서 "리"요소를 생성 할 배열에서. 예를 들어

, 나는 템플릿이 있습니다

<li> 
    <div> 
    <a href="#"> 
     <span class="icon"></span> 
     <span class="text">[PLACEHOLDER HERE]</span> 
     <span class="icon"></span> 
     <span class="icon large"></span> 
     <br/> 
     <span class="information">[PLACEHOLDER HERE]</span> 
     <hr /> 
    </a> 
    </div> 
</li> 

을하고 난 여전히 전체 템플릿을 적용하는 동안 ([여기 자리 표시 자]를에 내 자바 스크립트 배열에서 블록의 정보를 분석하는 방법을 알아 내려고 노력하고있어 모든 내부 태그와 클래스)를 for for loop라고 부릅니다. 이 작업을 수행하는 빠른 방법이 있습니까? 아니면 여기서 내 목표를 달성하기 위해 일련의 추가 작업과 기타 작업을 수행해야합니까?

Answer 1

배열 매핑이 다른 옵션이

Answer 2

모델을 만들려고했습니다. 계속 이렇게하고 원하는 모델을 만듭니다.

<script language="JavaScript"> 
window.onload = function() { 
function createTable(tableData) { 
    var ul = document.getElementById('my_List'); 
    var li = document.createElement('li'); 
    var div = document.createElement('div'); 
    var ahref = document.createElement('a'); 

    tableData.forEach(function(rowData) { 
    var row = document.createElement('tr'); 

    rowData.forEach(function(cellData) { 
     var cell = document.createElement('span'); 
     cell.innerHTML = cellData; 
     row.appendChild(cell); 
    }); 

    ahref.appendChild(row); 
    }); 

    div.appendChild(ahref); 
    li.appendChild(div); 
    ul.appendChild(li); 
} 

createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]); 

} 
</script> 

Answer 3

템플릿으로 사용하려는 HTML 요소가 있으므로 필요에 따라 복제하고 채 웁니다.

$("#create-more").on("click", function() { 
 
    // First, save references... 
 
    var myContentPane = $(".content-pane"); 
 
    var myText = $(".form-text").val(); 
 
    var myInfo = $(".form-info").val(); 
 

 
    // This is a clone of our hidden template 
 
    var myTemplate = $("#template").clone(); 
 

 
    // Replace placeholders in the template... 
 
    myTemplate.attr("id", ""); 
 
    myTemplate.find(".text").text(myText); 
 
    myTemplate.find(".information").text(myInfo); 
 

 
    // Now we use the template! 
 
    myContentPane.append(myTemplate); 
 
});

#template { 
 
    display: none; 
 
} 
 
label { 
 
    font-weight: bold; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <label for="text-stuff">Some text:</label> 
 
    <input type="text" class="form-text" /> 
 
    <label for="information">Some Info:</label> 
 
    <input type="text" class="form-info" /> 
 
    <button id="create-more"> 
 
    Create more 
 
    </button> 
 
</form> 
 
<div id="template"> 
 
    <a href="#"><span class="icon" </span> 
 
    <span class="text">[PLACEHOLDER HERE]</span> 
 
    <span class="icon"></span> 
 
    <span class="icon large"></span> 
 
    <br/> 
 
    <span class="information">[PLACEHOLDER HERE]</span> 
 
    <hr /> 
 
    </a> 
 
</div> 
 
<section class="content-pane"> 
 
</section>

Answer 4

처음부터이 문제에 대한 해결책은 매우 혼란 얻을 수 있습니다; 사용 가능한 라이브러리를 사용하는 것이 좋습니다.

로다시에는 _.template이라는 훌륭한 솔루션이 있습니다. Check out the docs here.

// constructing string like this for readability 
var li = [ 
    '<li>', 
    '<div><%=id%></div>', 
    '<div><%=name%></div>', 
    '</li>' 
].join(''); 

var liTemplate = _.template(li); 

var liOne = liTemplate({ id: '1', name: 'Hello' }); // => "<li><div>1</div><div>Hello</div></li>" 
var liTwo = liTemplate({ id: '2', name: 'World' }); // => "<li><div>2</div><div>World</div></li>" 

편집 :

var ul = document.getElementById('my_list'); 
ul.innerHTML = liOne + liTwo;