자바 스크립트 함수 내에서 HTML 구성

페이지에 HTML 요소를 추가하는 자바 스크립트 함수를 고려해보십시오. 이 함수에서 요소의 HTML을 지정하는 행이 필요합니다. 그러나이 HTML이 복잡하다면 코드가보기 흉하고 어렵게 만들 수 있습니다. 다음의 예는 (같은 ul.innerHTML에주의를 재생) 고려 : 자바 스크립트 함수 내에서 HTML을 구성하기 위해이보다 더 좋은 방법은자바 스크립트 함수 내에서 HTML 구성

function addHTMLField(area,limit) { 
     var field_area = document.getElementById(area); 
     var all_inputs = field_area.getElementsByTagName("ul"); 
     var last_item = all_inputs.length - 1; 
     var last = all_inputs[last_item].id; 
     var count = Number(last.split("_")[1]) + 1; 
     if(count > limit && limit > 0) return; 
     if(document.createElement) { //WC3 Dom method 
      var ul = document.createElement("ul"); 
      ul.innerHTML = "<ul style='margin-top: 10px' id='blog_"+count+"'><li>Blogname:<br/> <input type='text' name='blog["+count+"][name]' size='40' /></li><li>Blog Title:<br/> <input type='text' name='blog["+count+"][title]' id='blogtext_"+count+"' size='40' /></li><li>Username:<br/> <input type='text' name='blog["+count+"][username]' id='blogcategory_"+count+"' size='40' /></li><li>E-Mail:<br/> <input type='text' name='blog["+count+"][email]' id='blogcategory_"+count+"' size='40' /> <br/><small>A new user will be created if the above email address is not in the database. <br/>The username and password will be mailed to this email address. </small></li><li><input type='button' value='Remove Blog' onclick=\"removeItem('blog_"+count+"')\"> </li></ul>"; 
      field_area.appendChild(ul);      
     } else { 
      alert('an error occurred in the addLinkField function'); 
     } 
    }

있습니까? 일부 필드는 동적으로 채워지기 때문에 모든 HTML을 자바 스크립트 외부로 만들 수는 없습니다.

통찰력을 주셔서 감사합니다.

출처

2010-01-04 Nuno Morgadinho

ul.innerHTML을 설정하는 대신 모든 자식 노드에 document.createElement를 사용하지 않는 이유는 무엇입니까? – vit

나는 코드와 HTML을 분리하는 것이 정말로 중요하다고 생각한다. JavaScript 내에서 HTML을 편집하는 것은 끔찍한 시련입니다. 동적 변수로 잘 작동하는 솔루션이 있습니다.

이 같은 자바 스크립트 템플릿 엔진이 있습니다 : PURE.

John Resig (JQuery 제작자)도 함께 넣어 a micro-templating engine. 이 예제는 숨겨진 div 에서 가져온 HTML 코드를 페이지 내 내에있는 멋진 방법으로 보여줍니다. 이렇게하면 HTML이 속한 곳이지만 동적으로 사용자가 작성할 수 있습니다. 그리고 저는 JQuery 팬이 아니지만, Resig 같은 사람이 그것을 만든다면 그것은 또한 맹목적으로 신뢰하는 경향이 있습니다. 성능 관점에서 사용할 수 있습니다.

출처

2010-01-04 11:38:59

링크 Pekka 감사합니다 :) – Mic

당신의 엔진은 정말 멋지 네요. –

저는 JS와 HTML을 잘 구분하기 위해 브라우저에서 실행되는 XML-XSLT의 큰 팬이었습니다.

그런데 우리는 1 년 전에 JSON으로 바뀌었고, PURE은 비슷한 구분을 잃은 것에 대한 우리의 반응이었습니다.

우리는 HTML 용 PURE를 기반으로하는 웹 응용 프로그램 (곧 베타 버전)을 만들고 있습니다.
명확한 커팅을 통해 프론트 엔드 개발을 구축하고 유지 관리 할 수 있습니다.

출처

2010-01-04 12:28:00 Mic

자바 스크립트 함수 내에서 HTML 구성

답변

관련 문제