DIV-Inhalt mittels XML und Ajax ändern

[Mufasa]

Hallo allerseits,

ich arbeite gerade an einer Seite und hänge so ziemlich am JavaScript und bei den Funktionen, die mir im Kopf herumschweben. Beim Menü hat mir kkapsner hier schon sehr geholfen, wofür ich sehr dankbar bin.

Jetzt geht es an eine andere Funktion, wobei ich glaube, dass sich Ajax am besten eignet. Deswegen jetzt ein neues Thema. Ziel ist es den Inhalt eines DIV's dynamisch zu ändern. Dabei soll auch die Möglichkeit gegeben sein die Sprache zu ändern. Bei geänderter Sprache sollen andere, neue Menüpunkte dann in der neu gewählten Sprache angezeigt werden.

Ich weiß zwar, dass sowas i.d.R. mit PHP gelöst wird, aber damit würde bei jeder Änderung die Seite neu geladen werden. Dies möchte ich gerne verhindern, deswegen die Idee mit XML/JS/AJAX.

Zum besseren Verständnis habe ich habe versucht das ganze mal in einem Use-Case-Diagram dar zu stellen. OK, das Use-Case ist jetzt nicht ganz standardkonform, aber ich denke verständlich ist es

Um nicht ganz viele unterschiedliche Text-Dateien für die jeweiligen Sprachen erstellen zu müssen, habe ich gedacht das ganze entweder mit einer XML-Datei oder je ein XML pro Menüpunkt zu realisieren. Was haltet Ihr davon? Welche anderen Möglichkeiten würdet Ihr ansonsten empfehlen?

Bei der Variante "eine XML-Datei" habe ich mir folgenden Aufbau vorgestellt:

 
<?xml version="1.0" encoding="...."?>
<translations>
    <translation id="start">
        <english>Hello, how are you?</english>
        <spanish>¿Hola como estas?</spanish>
        <german>Hallo, wie geht es Dir?</german>
        <italian>Ciao, come stai?</italian>
        <french>Salut comment allez-vous?</french>
        <portuguese>Oi como vai?</portuguese>
        <turkish>Merhaba nasılsın?</turkish>
        <polish>Cześć, jak się masz?</polish>
        <russian>Привет как дела?</russian>
        <mandarin>你好！你好嗎？</mandarin>
        <cantonese>.....</cantonese>
        <japanese>こんにちは、元気ですか？</japanese>
        <arabic>مرحبا كيف حالك؟</arabic>
        <farsi>سلام، حال شما چطور است؟</farsi>
        <hindi>नमस्ते आप कैसे हैं?</hindi>
        <bengali>হ্যালো আপনি কেমন আছেন?</bengali>
        <afrikaans>Hello hoe gaan dit?</afrikaans>
        <amharic>ሰላም እንደምን አለህ?</amharic>
    </translation>
    <translation id="about">
        <english>This is about us!</english>
        <spanish>Esto es acerca de nosotros!</spanish>
        <german>Dies ist über uns!</german>
        <italian>Questo è su di noi!</italian>
        <french>Ceci est sur nous!</french>
        <portuguese>Isto é sobre nós!</portuguese>
        <turkish>Bu bizimle ilgili olduğunu!</turkish>
        <polish>Jest to o nas!</polish>
        <mandarin>這是關於我們！</mandarin>
        <cantonese>.....</cantonese>
        <japanese>これは私たちについてです！</japanese>
        <arabic>هذا هو عنا!</arabic>
        <farsi>این در مورد ما!</farsi>
        <hindi>यह हमें के बारे में है!</hindi>
        <bengali>এই আমাদের সম্পর্কে হয়!</bengali>
        <russian>Это о нас!</russian>
        <afrikaans>Dit gaan oor ons!</afrikaans>
        <amharic>ይህ ስለ እኛ ነው!</amharic>
    </translation>
    <translation id="contact">
        ... ... ...
        ... ...
        ...
        ..
    </translation>
</translations>

Wenn Ihr auch diese Vaariante empfehlen würdet, welches Encoding müsste ich dann wählen, damit alle Sprachen genutzt werden können?

Mein Problem ist, dass ich gerade so gar nicht weiß wie ich das richtig umsetzen kann. Hab zwar eine grobe Vorstellung vom Aufbau und der Funktionsweise.... aber bei der Realisierung hoffe ich auf Eure freundliche Unterstützung.

Die Seite ist hier auf meiner Dropbox. Ich werde schon mal das Grundegerüst aufbauen und schaue mal wie weit ich selber kommen kann.

Im Voraus schon mal besten Dank!

LG

[Mufasa]

Sooooo, da hier noch keine Antwort gegeben wurde, aktualisiere ich mal den Status. Das Grundgerüst steht und die XML-Datei auch.... abgesehen vom encoding. Ich bin noch am recherchieren welches encoding man für diese vielen unterschiedlichen Sprachtypen nutzen kann. Any idea??

Jetzt muss die "Intelligenz" rein wie oben grafisch dargestellt. Würde mich über jede Unterstützung sehr freuen!

[paul schmitz]

Ich habe so etwas mal in meinem Projekt gemacht.
Definition in language.js:

var german,english,language;
english={
time:"time",
hour:"hour"
}
german={
time:"zeit",
hour:"stunde"
}
language=german;//default

In Funktionen schreibst du:

function displayMenu(){
document.getElementById("menu").innerHTML="Menu: "+language.time+" "+language.hour;
}

Ausgabe:
Bei English: Menu: Time Hour
Bei Deutsch: Menu: Zeit Stunde

Zum ändern der Sprache:

language=english;
language=german;

Ist natürlich nicht mit XML und Ajax, aber eine Lösung zu deiner Herausforderung.

[Mufasa]

Danke für die Antwort und den Lösungsvorschlag.

Mit Deiner Lösung fällt mir auf, dass ich ja auch noch die einzelnen Menüpunkte übersetzen muss. Ok da ist ja nicht viel Text, die könnte ich dann so auf Deine Art ändern. Da werde ich mich nachher mal dran machen.

Aber für den content von allen Menüpunkten, denke ich wäre das nicht ganz optimal, weil man ja so alles in die JS-Datei reinschreiben muss. Aus diesem Grund sind mir hierfür jetzt nur XML oder JSON eingefallen..... und mit JSON kenne ich mich noch weniger aus, daher der XML-Ansatz :-) Aber vielleicht kommt ja noch von anderen eine ganz andere neue Idee, auf die ich jetzt selber noch nicht gekommen bin.

[paul schmitz]

Du kannst natürlich alle Menüpunkte in ein Array hineinschmeißen.

var german={
//...
menu:[
"erster Menüpunkt",
"zweiter Menüpunkt",
//...
]
}

"weil man ja so alles in die JS-Datei reinschreiben muss."
Sonst musst du alles in die HTML-Datei schreiben. So ist es nicht viel mehr Aufwand, JavaScript kann strukturiert sein, und damit die Informationen gut lesbar.

[kkapsner]

Also ich finde den Ansatz mit dem XML gar nicht schlecht. Ist natürlich etwas mehr Arbeit als die JS Variante, dafür aber viel flexibler.

Ich persönlich würde aber verschiedene Dateien für verschiedene Sprachen machen. So muss nur die Sprache, die der Benutzer auch verwendet (und ev. die Standardsprache für Fallbacks), heruntergeladen werden.

Ich bin noch am recherchieren welches encoding man für diese vielen unterschiedlichen Sprachtypen nutzen kann. Any idea??

UTF-8.

PS: JSON ist viel einfacher als XML... und meiner Meinung nach auch einfacher zu lesen.

[Mufasa]

Hello again

Sooo bin wieder dran. Danke erstmal für die hilfreichen Tipps. Habe vieles probiert, mir einige Tutorials reingezogen und bin jetzt auch zu dem Schluss gekommen, ....

PS: JSON ist viel einfacher als XML... und meiner Meinung nach auch einfacher zu lesen.

....dass jSON wohl wirklich die bessere Option wäre.

Allerdings klappt das mit dem Zugriff auf die Inhalte noch nicht ganz so wie ich will. Irgendwie erkenne ich nicht wo der Fehler ist.... Ich möchte jetzt im ersten Versuch nur eine JSON-Variable per alert ausgeben. Die JSON-Datei habe ich eben hier hochgeladen: myjson.com

Laut validator ist das auf jeden Fall valid Bei mir lokal befindet sich die Datei zum Testen im gleichen Ordner wie das html.

Mein Versuch darauf zuzugreifen ist dies:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
  </head>
  <body>

    <button onclick="langswitch()">Try it</button>

    <script>
    function langswitch() {

      var output = document.getElementbyId('output');
      var ajaxhttp = new XMLHttpRequest();
      var url = "lang.json";

      ajaxhttprequest.open("GET", url, true);
      ajaxhttprequest.setRequestHeader("content-type","application/json");
      ajaxhttprequest.onreadystatechange = function () {
          if (ajaxhttp.readyState == 4 && ajaxhttp.status == 200) {
              var jcontent = JSON.parse(ajaxhttp.responseText);
              }
          };
      http_request.send(null);

      alert(jcontent.en.navigation[0]);

    };

    </script>
  </body>
</html> 

Könntet Ihr mir sagen wo hier der Fehler steckt?

[tsseh]

Könntet Ihr mir sagen wo hier der Fehler steckt?

das dürfte dir auch die fehlerkonsole sagen, ich zähle auf die schnelle 3 unterschiedliche bezeichnungen für das requestobjekt

[Mufasa]

Hab gerade gesehen myjson schmeißt die Formatierung über Board.....
Hier das Ganze sauber formatiert, damit es besser zu lesen ist

{
  "en":{
    "langcode":"en",
    "navigation": ["Link1en", "Link2en", "Link3en", "Link4en"],
    "site": {
      "flagtitle":"Select language",
      "message":"send message"
    },
    "flags": {
      "en":"English",
      "es":"Spanish",
      "de":"German",
      "it":"Italian",
      "fr":"French",
      "pt":"Portuguese",
      "tr":"Turkish",
      "pl":"Polish",
      "ru":"Russian",
      "lt":"Lithuanian",
      "ro":"Romanian",
      "jp":"Japanese",
      "zh":"Mandarin",
      "yue":"Cantonese",
      "th":"Thai",
      "ar":"Arabic",
      "fa":"Farsi",
      "hi":"Hindi",
      "bn":"Bengali",
      "af":"Afrikaans",
      "am":"Amharic"
    },
    "hello": {
      "title": ["Hello","Good Morning","","","Good Afternoon"],
      "p1":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.",
      "p2":"A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.",
      "p3":"Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.",
      "p4":"The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.",
      "p5":"When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.",
      "link1":"Far far away.",
      "link2":"River named Duden."
    },
    "why": {
      "title":"Why work with us?",
      "p1":"Lorem Ipsum What 1",
      "p2":"Lorem Ipsum What 2",
      "p3":"Lorem Ipsum What 3",
      "p4":"Lorem Ipsum What 4"
    },
    "projects": {
      "p1":"Lorem Ipsum Kunden & Projekte"
    },
    "contact": {
      "p1":"Lorem Ipsum Contact"
    }
  },

  "de":{
    "langcode":"de",
    "navigation": ["Link1de","Link2de","Link3de","Link4de"],
    "site": {
      "flagtitle":"Sprachwahl",
      "message":"Nachricht senden"
    },
    "flags": {
      "en":"Englisch",
      "es":"Spanisch",
      "de":"Deutsch",
      "it":"Italienisch",
      "fr":"Französisch",
      "pt":"Portugiesisch",
      "tr":"Türkisch",
      "pl":"Polnisch",
      "ru":"Russisch",
      "lt":"Litauisch",
      "ro":"Rumänisch",
      "jp":"Japanisch",
      "zh":"Mandarin",
      "yue":"Kantonesisch",
      "th":"Thai",
      "ar":"Arabisch",
      "fa":"Farsi",
      "hi":"Hindi",
      "bn":"Bengalisch",
      "af":"Afrikaans",
      "am":"Amharisch"
    },
    "hello": {
      "title": ["Hallo","Guten Morgen","Guten Mittag","Guten Tag","Guten Abend"],
      "p1":"Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.",
      "p2":"Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.",
      "p3":"Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.",
      "p4":"Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.",
      "p5":"Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse.",
      "link1":"Weit hinter den Wortbergen.",
      "link2":"Bächlein namens Duden."
    },
    "why": {
      "title":"Warum mit uns zusammenarbeiten?",
      "p1":"Lorem Ipsum What 1",
      "p2":"Lorem Ipsum What 2",
      "p3":"Lorem Ipsum What 3",
      "p4":"Lorem Ipsum What 4"
    },
    "projects": {
      "p1":"Lorem Ipsum Kunden & Projekte"
    },
    "contact": {
      "p1":"Lorem Ipsum Kontakt"
    }
  }
}

- - - Aktualisiert - - -

das dürfte dir auch die fehlerkonsole sagen, ich zähle auf die schnelle 3 unterschiedliche bezeichnungen für das requestobjekt

Ah verdammt, ich vergesse immer die Fehlerkonsole, das hatte kkapsner auch schon erwähnt.

Jetzt korrigiert
Könntest Du bitte trotzdem mal drüberschauen? Das ist mein allererster Versuch mit JSON, daher würde ich mich über Verbesserungsvorschläge freuen. Später sollen bei Klick die einzelnen Elemente in die verschiedenen vorbereiteten HTML-divs eingefügt werden.

<!DOCTYPE html>
<html>
  <head><meta charset="UTF-8" /></head>
  <body>

    <button onclick="langswitch()">Try it</button>

    <script>
    function langswitch() {

      //var output = document.getElementbyId('output');
      var ajaxhttprequest = new XMLHttpRequest();
      var url = "lang.json";

      ajaxhttprequest.open("GET", url, true);
      ajaxhttprequest.setRequestHeader("content-type","application/json");
      ajaxhttprequest.onreadystatechange = function () {
          if (ajaxhttprequest.readyState == 4 && ajaxhttprequest.status == 200) {
              var jcontent = JSON.parse(ajaxhttprequest.responseText);
                console.log(jcontent);
          alert(jcontent.en.navigation[0]);
              }
          };
      ajaxhttprequest.send(null);
    };
    </script>
  </body>
</html> 

[tsseh]

Das ist mein allererster Versuch mit JSON, daher würde ich mich über Verbesserungsvorschläge freuen. Später sollen bei Klick die einzelnen Elemente in die verschiedenen vorbereiteten HTML-divs eingefügt werden.

da würde sich vielleicht eine templateengine anbieten wie mustache oder derivate wenn man nicht gleich auf angular setzen will und das aber auf js ebene realisieren möchte

https://mustache.github.io/#demo

[Mufasa]

Danke für den Tipp. Ok, das ist jetzt noch etwas ganz ganz neues für mich. Soweit ich jetzt gelesen habe sind Mustache und AngularJS beides Template-Systeme, richtig? Welches würdest Du denn hier eher empfehlen? Ich kenne beide nicht und möchte mich jetzt erstmal nur in eins einarbeiten.

[tsseh]

das kommt immer darauf an, was man vorhat. angular ist eher ein mvc framework, also vermutlich etwas zu oversized für das was du vorhast. mustache & co eher etwas für kleine templates.

[Mufasa]

Danke, dann schaue ich mir jetzt erstmal Mustache genauer an

- - - Aktualisiert - - -

Ok, hab jetzt herumprobiert bis ich ein kleines Beispiel zum Laufen bekommen habe

JSON: test.json

{
  "name": "Chris",
  "girlfriend": "Sandra",
  "country": "USA",
  "age": 26
} 

HTML/JS: jsontest.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://raw.githubusercontent.com/janl/mustache.js/master/mustache.js"></script>
        <script>
        $(document).ready(function(){

            $.getJSON("test.json", function(data) {
                var template = $('#personTpl').html();
                var html = Mustache.to_html(template, data);
                $('#sampleArea').html(html);
            });

        });
        </script>
  </head>
  <body>

        <div id="sampleArea"></div>

        <script id="personTpl" type="text/template">
            <p>{{name}} is {{age}} years old.</p>
            <p>He lives with his girlfriend {{girlfriend}} in {{country}}.</p>
        </script>
  </body>
</html> 

funktioniert soweit
Jetzt stellen sich mir drei Fragen, auf die ich jetzt keine konkrete Lösung finden konnte:

1. Aktuell lade ich ja den gesamten json-Inhalt in #sampleArea rein.
   Frage: Wie kann ich die einzelnen Variablen aus der json-Datei in verschiedene DIVs laden?
   
2. Wie gesagt sollen ja später unterschiedliche Sprachvarianten in die DIVs geladen werden. Von kkapsner wurde ja empfohlen für jede Sprache eine eigene Datei zu erstellen, denke auch das ist besser so, damit nur die Standard-Sprache (Englisch) und die benötigte/ausgewählte Sprache heruntergeladen werden. Die Buttons der Sprachauswahl haben jeweils ein class-tag und ein name-tag. Z.B. <span class="flag" name="en"></span>. Die einzelnen Sprach-JSON-Dateien werden später beispielsweise so benannt "language_en.json".
   Frage: Wie kann ich class und name des span an getJSON übergeben um so die jeweils richtige Sprachdatei zu laden?
   
3. Ich habe jetzt irgendwie nur Beispiele gefunden, die die JQUERY-Notation verwenden. Da ich bei dieser Seite bisher komplett auf JQUERY verzichtet habe, würde ich das auch gerne hierbei machen.
   Frage: Kann ich das alles auch ohne JQUERY verwenden? Wenn ja, was muss alles geändert werden?

[tsseh]

[*]Aktuell lade ich ja den gesamten json-Inhalt in #sampleArea rein.
Frage: Wie kann ich die einzelnen Variablen aus der json-Datei in verschiedene DIVs laden?

indem du mehrere templates nimmst, aber warum willst du das machen? der vorteil ist ja gerade alles der templateengin zu überlassen und nicht jeden text in ein extra div zu laden.

[*]Wie gesagt sollen ja später unterschiedliche Sprachvarianten in die DIVs geladen werden. Von kkapsner wurde ja empfohlen für jede Sprache eine eigene Datei zu erstellen, denke auch das ist besser so, damit nur die Standard-Sprache (Englisch) und die benötigte/ausgewählte Sprache heruntergeladen werden. Die Buttons der Sprachauswahl haben jeweils ein class-tag und ein name-tag. Z.B. <span class="flag" name="en"></span>. Die einzelnen Sprach-JSON-Dateien werden später beispielsweise so benannt "language_en.json".
Frage: Wie kann ich class und name des span an getJSON übergeben um so die jeweils richtige Sprachdatei zu laden?

du kannst ja class und name auslesen, oder du gehst über data-attribute, oder oder oder

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery.js"></script>
    <script src="mustache.js"></script>
  </head>
  <body>
  <div id="content"></div>
  <script>
    $(function()
    {
      function changeLang(lang)
      {
        $.getJSON(lang + '.json', function(data)
        {
          var template = $('#template').html();
          var rendered = Mustache.render(template, data);
          $('#content').html(rendered);
          $('.lang').on('click', function(e)
          {
            changeLang($(e.currentTarget).data('lang'));
          });
        });
      }
      changeLang('de');
    });
  </script>
  <script id="template" type="x-tmpl-mustache">
    <button class="lang" data-lang="de">{{de}}</button><button class="lang" data-lang="en">{{en}}</button>
    {{text}}
  </script>
  </body>
</html>

[*]Ich habe jetzt irgendwie nur Beispiele gefunden, die die JQUERY-Notation verwenden. Da ich bei dieser Seite bisher komplett auf JQUERY verzichtet habe, würde ich das auch gerne hierbei machen.
Frage: Kann ich das alles auch ohne JQUERY verwenden? Wenn ja, was muss alles geändert werden?

ja, natürlich geht das auch ohne jquery, jquery macht ja nur alles einfacher

[Mufasa]

Danke für die Antwort, auf jeden Fall sehr hilfreich!

indem du mehrere templates nimmst, aber warum willst du das machen? der vorteil ist ja gerade alles der templateengin zu überlassen und nicht jeden text in ein extra div zu laden.

Ich glaube hier hab ich nicht ganz richtig erklärt was ich meinte. Also mein Sprachdateien sind ja natürlich viel größer als nur dieses kleine Beispiel oben. Auch die Zielseite hat entsprechend viel mehr DIVs... da wäre z.B. die Navigationselemente, Überschriften, Content, etc... Die müssen bei Klick auf die neue Sprache alle ersetzt werden. Das meinte ich mit "in verschiedene DIVs laden". Mir ist nämlich gerade nicht klar wie ich alle Inhalte mit nur diesem einen "Input-DIV" (nenne ich das jetzt mal) einfügen kann.
EDIT: Vergiss das bitte. War mein Denkfehler! Hab gerade gemerkt, dass ich einfach falsch gedacht habe..... Bitte korrigier mich wenn ich jetzt auch falsch liege, aber wenn ich das jetzt richtig begreife, wird diese bei mir genannte "sampleArea" ja gar nicht im Dokument angezeigt, richtig?!? Und durch die doppelten geschweiften Klammern kann ich meine Variablen aus JSON in jedes Element einfügen.

du kannst ja class und name auslesen, oder du gehst über data-attribute, oder oder oder

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery.js"></script>
    <script src="mustache.js"></script>
  </head>
  <body>
  <div id="content"></div>
  <script>
    $(function()
    {
      function changeLang(lang)
      {
        $.getJSON(lang + '.json', function(data)
        {
          var template = $('#template').html();
          var rendered = Mustache.render(template, data);
          $('#content').html(rendered);
          $('.lang').on('click', function(e)
          {
            changeLang($(e.currentTarget).data('lang'));
          });
        });
      }
      changeLang('de');
    });
  </script>
  <script id="template" type="x-tmpl-mustache">
    <button class="lang" data-lang="de">{{de}}</button><button class="lang" data-lang="en">{{en}}</button>
    {{text}}
  </script>
  </body>
</html>

Danke für den Code. Nur um ganz ehrlich zu sein, ist mir irgendwie nicht ganz klar was Dein Code hier macht. Wenn ich das richtig erkenne, gehst Du über ein data-attribut. Was genau ist das data-Attribut hier? Woher kommt das 'lang'? Könntest mir bitte jede Zeile erklären? Ich weiß das dauert ein wenig, aber ich würde gerne genau verstehen was hier passiert. Würde mich sehr freuen!

ja, natürlich geht das auch ohne jquery, jquery macht ja nur alles einfacher

Ja naja "einfacher"...... für mich persönlich ist getElementbyID einfach verständlicher als $('#xxx')..... - hmmm könnte natürlich auch an der nicht sooo große Erfahrung bei mir liegen, aber zunächst bleibe ich lieber mal bei herkömmlichem JS
Wie genau müsste der Code denn aussehen in rein Javascript? Ich habe jetzt erstmal nur die $ geändert, aber sonst der Rest ist ja noch JQUERY. Und so mischen wie es jetzt ist geht ja nicht. Also das funktioniert auf jeden Fall mal nicht:

        $(document).ready(function(){

            $.getJSON("test.json", function(data) {
                var template = getElementbyId('personTpl').html();
                var html = Mustache.to_html(template, data);
                getElementbyId('sampleArea').html(html);
            });

        });