Formatieren von jQuery-Strings, die sich über mehrere Zeilen erstrecken sollten

Question

Eine nette Sache mit jQuery ist, dass die Syntax (z. B. beim Verketten) dem Skript ermöglicht, mehrere Zeilenumbrüche zu überspannen, um Formatierung und Lesbarkeit zu erleichtern.

Gibt es eine äquivalente/bevorzugte Methode, wenn eine große HTML-Kette hinzugefügt wird?

Zum Beispiel wäre es schön, so etwas zu tun:

$("#theObject") 
    .doSomething() 
    .append(" 
     <div> 
      <div> 
        Hello World 
      </div> 
     </div> 
    ") 

das nicht, aber funktioniert ist es so etwas wie das zu erleichtern, HTML lesen in einem Skript jQuery formatiert ?

Answer 1

eine \ hinzufügen am Ende jeder Zeile

$("#theObject").doSomething() 
.append(" 
    <div>\ 
     <div>\ 
       Hello World\ 
     </div>\ 
    </div>\ 
") 

Bearbeiten 2016:

Wenn Sie ES6 (ES2015) verwenden, können Sie jetzt template literals verwenden.

Answer 2

$("#theObject") 
.doSomething() 
.append(
    "<div>" 
     +"<div>" 
       +"Hello World" 
     +"</div>" 
    +"</div>" 
); 

Es wäre am besten Praxis Ihre .append() Inhalte als var zu laden, etwa so:

var append_me = 
    "<div>" 
     +"<div>" 
       +"Hello World" 
     +"</div>" 
    +"</div>"; 

$("#theObject").doSomething().append(append_me); 

Answer 3

var str = '<div>'; 
str += '<div>'; 
str += 'Hello World'; 

$("#theObject") 
    .doSomething() 
    .append(str) 

Answer 4

Es gibt keine elegante Möglichkeit, eine nette HTML-Baumstruktur in Javascript mit Strings darzustellen. Sie müssen einfach eine Reihe von Verkettungen verwenden, die immer hässlich sein werden, und ich könnte hinzufügen, dass es furchtbar funktioniert. Das ist, was ich tue:

1. Schreiben meine Markup in meinem Lieblings-Editor mit dem Leerzeichen alles, was ich
2. speichert es in der gleichen Position wie Ihre JS-Datei mit dem gleichen Namen + „.txt“, wie die will Erweiterung
3. Mein Redakteur finden und ersetzen mit RegEx, so dass ich einen Ersatz-alles mit so etwas wie >[\s]*<
4. Kopieren Sie das einzeilige Ergebnis auf meine Javascript-Datei als String-Variable
5. Lösen Sie die ersetzen in der .txt-Datei

Dies bedeutet natürlich, dass jedes Mal, wenn Sie das Markup ändern, Sie das Ersetzen erneut durchführen und kopieren müssen. Ich kam aber ziemlich schnell zu dieser Angewohnheit. Darüber hinaus kann jQuery dies schneller verarbeiten, da weniger Zeichen analysiert werden müssen.

Answer 5

Wenn Sie jQuery verwenden und Ihre String-Literale HTML-Elemente sein sollen, können Sie diese Elemente auch direkt auf der Seite erstellen und ausblenden und dann auf diese Elemente im DOM verweisen, anstatt sie auszutippen als Zeichenfolgen. Zum Beispiel könnten Sie diese auf Ihrer Seite setzen:

<div id="myContent" style="display: none;"> 
    <div> 
     <div> 
      Hello World 
     </div> 
    </div> 
</div> 

Und dann neu schreiben Sie den Code wie folgt aus:

$("#theObject") 
.doSomething() 
.append(
    $('#myContent').html(); 
); 

Alternativ können Sie die tatsächliche DOM-Element selbst anhängen, wenn Sie verweisen müssen sie die einmal, anstatt seinen Inhalt jedes Mal zu kopieren.

Answer 6

Dies kann viel einfacher gemacht werden!

Verwenden Sie nicht das "+" oder "/".

Verwenden Sie die Graviszeichen: `

$("#theObject").doSomething() 
.append(` 
    <div> 
     <div> 
       Hello World 
     </div> 
    </div> 
`)