Sử dụng jQuery để lặp lại văn bản

Question

Có thể sử dụng jQuery để lặp lại văn bản thay cho thẻ tập lệnh không? Chính xác hơn, có cách nào để hoàn thành

<script type="text/javascript"> 
    document.write("foo"); 
</script> 

... mà không sử dụng document.write? Tôi không hài lòng khi sử dụng document.write sau khi đọc this.

Tôi biết rằng tôi cũng có thể làm điều này:

<span id="container"></span> 
<script type="text/javascript"> 
    $("#container").text("foo"); 
</script> 

Tuy nhiên, tôi đang quan tâm để xem nếu có một cách để làm điều đó mà không cần sử dụng một yếu tố container, tốt nhất là sử dụng jQuery.

Cảm ơn trước!

Answer 1

Có, và Không. Cho những gì bạn muốn, không.

1. Bạn có thể cho phép văn bản đó lặp lại nội dung nào đó mà không chứa đúng không, vâng (xem: DocumentFragment).

2. Nó sẽ hiển thị trong tài liệu của bạn ... không. Điều này là bởi vì nó đã không được cho biết nơi nó nên được đặt. Các thẻ script trong html không duy trì vị trí của chúng như là một tham số trực tiếp, do đó bạn có thể fudge xung quanh để tìm thẻ cuối cùng và đặt một TextNode ở đó, tuy nhiên, điều này có thể khó khăn và lỗi.

Điều bạn có thể làm thay vì thực hành chung là không sửa đổi phần cho đến khi có sự kiện như "document.body.onLoad". Đây là một thực tế phổ biến, và nói chung là cách để đi cho ajax đặc biệt.

Nếu không có điều nào phù hợp với bạn, hãy sử dụng insertBefore(), jquery hiếm hoi cung cấp hỗ trợ có thể so sánh với .after và .trước đó, trên phần tử tập lệnh của bạn có id.

<script id="flail"> 
var flail=document.getElementById("flail"); 
flail.parentNode.insertBefore(document.createTextNode("TEST"),flail) 
</script> 

Lưu ý: Đây là một thói quen xấu vì nó có thể tạo ra tải treo, và khuyến khích các trang html không được mạch lạc mà không cần đầu ra này. Tuy nhiên, giống như tất cả mọi thứ, có những trường hợp cho nó sử dụng.

Answer 2

Nếu bạn nghĩ ra cách jQuery để thực hiện document.write(), sẽ rất tệ cho tất cả các lý do tương tự.

Bạn nên sử dụng document.write() nếu đó là những gì bạn cần, hoặc tốt hơn, thao tác một phần tử hiện có hoặc thêm yếu tố mới vào đâu đó trong DOM - đó là những gì jQuery có ích.

Answer 3

Tôi khuyên bạn nên triển khai Công cụ tạo mẫu vi mô bởi John Resig, người sáng lập jquery.

Plugin đầy đủ

// Simple JavaScript Templating 
// John Resig - http://ejohn.org/ - MIT Licensed 
(function() { 
    var cache = {}; 

    this.tmpl = function tmpl(str, data) { 
     // Figure out if we're getting a template, or if we need to 
     // load the template - and be sure to cache the result. 
     var fn = !/\W/.test(str) ? 
       cache[str] = cache[str] || 
       tmpl(document.getElementById(str).innerHTML) : 
       // Generate a reusable function that will serve as a template 
       // generator (and which will be cached). 
       new Function("obj", 
       "var p=[],print=function(){p.push.apply(p,arguments);};" + 
       // Introduce the data as local variables using with(){} 
       "with(obj){p.push('" + 
       // Convert the template into pure JavaScript 
       str 
       .replace(/[\r\t\n]/g, " ") 
       .split("<%").join("\t") 
       .replace(/((^|%>)[^\t]*)'/g, "$1\r") 
       .replace(/\t=(.*?)%>/g, "',$1,'") 
       .split("\t").join("');") 
       .split("%>").join("p.push('") 
       .split("\r").join("\\'") 
       + "');}return p.join('');"); 

     // Provide some basic currying to the user 
     return data ? fn(data) : fn; 
    }; 
})(); 

Sử dụng

QUAN TRỌNG: Phá vỡ đường dây chỉ với \

var tpl = '\ 
    <div id="myTemplate">\ 
     <%\ var selectorIndex = 0;\ %>\ 
      <ul>\ 
       <% if(selectorIndex == 0){ %>\ 
       <li>this is echo text for zero</li>\ 
       <% } else{ %>\ 
       <li>this is echo text for something else</li>\ 
       <% } %>\ 
      </ul>\ 
    </div>\ 
'; 

$(body).html(tmpl(tpl,{'extraData':'here'})); 

Thông tin thêm

http://krasimirtsonev.com/blog/article/Javascript-template-engine-in-just-20-line

câu hỏi liên quan trên stackoverflow

Syntax Error with John Resig's Micro Templating after changing template tags <# {% {{ etc