Używanie jQuery do echo tekstu

Question

Czy można użyć jQuery do echo tekstu zamiast znacznika skryptu? A dokładniej, czy istnieje sposób na zrealizowanie ... bez użycia document.write? Nie jestem zadowolony z używania document.write po przeczytaniu this.

Zdaję sobie sprawę, że mogę to zrobić alternatywnie:

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

Jednak jestem zainteresowany, aby zobaczyć, czy jest jakiś sposób, aby to zrobić bez użycia elementu pojemnika, najlepiej przy użyciu jQuery.

Z góry dziękuję!

Answer 1

Tak, i Nie. Za to, co chcesz, nie.

1. Czy masz to echo tekst na coś bez prawdziwego kontenera, tak (patrz: DocumentFragment).

2. Pojawi się w twoim dokumencie ... nie. Dzieje się tak dlatego, że nie powiedziano mu, gdzie należy go umieścić. Znaczniki skryptów w html nie zachowują swojej pozycji jako parametru bezpośrednio, więc możesz kręcić wokół, aby znaleźć ostatni znacznik i umieścić tam węzeł TextNode, jednak może to być trudne i kłopotliwe.

Zamiast tego można zrobić ogólną praktykę, nie modyfikując domeny, aż do zdarzenia takiego jak "document.body.onLoad". Jest to powszechna praktyka i ogólnie jest to sposób na szczególnie ajax.

Jeśli żadna z tych opcji nie jest odpowiednia dla ciebie, użyj rzadkiego insertBefore(), jquery zapewnia porównywalną obsługę z .after i .before, na twoim elemencie skryptu z identyfikatorem.

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

Uwaga: ogół jest złą praktyką, ponieważ może tworzyć ładunki wiszące, i zachęca strony HTML nie być spójne bez tego wyjścia. Jednak, jak wszystkie rzeczy, są przypadki na jego wykorzystanie.

Answer 2

Jeśli wpiszesz sposób jQuery wykonania document.write(), będzie to złe z tych samych powodów.

Lepiej zrób to po prostu używając document.write(), jeśli tego potrzebujesz lub jeszcze lepiej, manipulując istniejącym elementem lub dołączając nowy element gdzieś w DOM - w tym właśnie jest jQuery.

Answer 3

Proponuję, aby zaimplementować mechanizm Micro Template przez John Resig, założyciela jquery.

Pełne wtyczki

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

Zastosowanie

WAŻNE: Break linie tylko z \

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

Więcej informacji

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

Podobne pytania na stackoverflow

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