에 문제가있는 경우

Question

나는 ul을 생성하고 li에 jquery append 함수를 사용하여 데이터를 추가합니다. 이 append 함수 안에 더 많은 xml 데이터를 구문 분석하고 ul에 추가하는 다른 함수를 호출하려고합니다. 그러나이 기능은 [object Object] 만 표시합니다. 반면에 내가 console.log(li)func() 내부에있을 때 올바른 li을 표시합니다. 여기

여기 내 코드

container.append(
      '<ul>' 
       + '<li>' 
        + '<h4 class="title stitle">' + from 
         + '<section><span class="subtitle">' + routeTime + ' mins ' + routeDist + ' km</span></section><br>' 
        + '</h4>' 
        + '<ul class="contents">' 
         + '<li>' + '<img src="' + walk + '" />' + '</li>' 
         + '<li>' + '<span class="">' + startTime + ' ' + distance + ' km</li>' 
         + func(lines) //<-- function call here 
        + '</ul>' 
       + '</li>' + 
      '</ul>' 
      ); 

하다 내가 실수를하고있는 FUNC 기능 코드

func = function (lines) { 
    var li = $('<li></li>'); 

    lines.each(function() { 
     var stopel   = $(this), 
      busCode   = stopel.attr('code').slice(1,4), 
      stops   = stopel.find('STOP'); 

     li.append('<img src="' + bus + '" />') 
     .append('<span>' + busCode + '</span>') 
     .append('<section class="clear"></section>'); 

     stops.each(function() { 
      var el2   = $(this).find('NAME'), 
       deptime  = $(this).find('DEPARTURE'); 
      li.append('<p class="stop">' + deptime.attr('time') + ' ' + el2.attr('val') + '</p>'); 
     }); 
     li.append('<p class="last"></p>'); 
    }); 
    console.log(li); 
    return li; 
} 

은?

Answer 1

문제는 함수는 jQuery를 객체를 반환한다는 것입니다. 그리고이 개체에 + 연산자를 사용하면이 문자열을 문자열로 사용하고 있습니다. 따라서 시도를 문자열로 변환하여 결과는 [object Object]입니다.

jQuery 객체에는 .html()이라는 메서드가 있는데, jQuery 객체의 HTML 내용을 문자열로 반환합니다.이 객체는 연결에서 안전하게 사용할 수 있습니다. 그러나 귀하의 경우에는 .outerHtml() 메소드가 필요합니다.이 메소드는 jQuery에는 없지만 추가 할 수 있습니다 (this question 참조). 또는 단순히 DOM (jQuery가 아님) .outerHTML 속성을 사용할 수 있습니다. Firefox는이 기능을 지원하지 않지만 이전 버전 (11 버전에서 잘못 입력 한 경우 수정)을 수행합니다.

당신은이 같은 func의 반환 값에 메소드를 호출 할 수 있습니다

+ func(lines).get(0).outerHtml //<-- function call here 

---

빠른 제안 : 당신이 DOM 방법을 원하는 경우

... 
+ '<li>' + '<span class="">' + startTime + ' ' + distance + ' km</li>' 
+ func(lines).outerHtml() //<-- function call here 
+ '</ul>' 
... 

아니면해야 Mustache (내 취향), Handlebars 등과 같은 템플릿 솔루션을 사용하십시오. Javascript에서 문자열을 연결하여 HTML을 생성하는 것은 추악하고, 유지하기 어렵고 01 규칙을 위반합니다.. 이 라이브러리 중 하나를 사용하면 어떻게 될지 궁금해 할 것입니다.

Answer 2

jQuery 객체를 반환하지만 사용자가 HTML을 원하는 것처럼 보입니다.

은 함수의 끝에서이 시도 :

return li.outerHTML; 

Answer 3

var li = $("<li></li>")을 수행하면 DOM 용으로 만든 목록 개체의 인스턴스에 대한 참조가 전달됩니다. 이 객체를 조작하고 있으므로 [Object Object]로 출력을 얻는 반면 Console에서는 해당 객체에 대한 HTML을 볼 수 있습니다.

li 객체 참조를 문자열로 나타내거나 $ .html (li) 또는 li.html();