ComputerBase Menü
Aktuelles

JavaScript JS: Link dynamisch erstellen, welcher Ansatz ist besser?

K

kali-hi

Lieutenant
Registriert
Sep. 2025
Beiträge
706
Moin, ich habe dafür zwei Ansätze, bin aber unsicher, welcher der sauberere wäre...

1.
HTML: 
        <span id="news1"></span>

        <script>
            fetch('headlines.json', {
                method: 'GET'
            })
                .then(function (response) { return response.json(); })
                .then(function (json) {
                    json = json.results;
                    let html = '';
                    for (let i in json) {
                        let a = json[i];
                        html += '<a href="' + a.link + '">' + a.title + '</a> - ';
                    }
                    document.getElementById('news1').innerHTML = html;
                });
        </script>

2.
HTML: 
        <span id="news1"></span>

        <script>
            fetch('headlines.json', {
                method: 'GET'
            })
                .then(function (response) { return response.json(); })
                .then(function (json) {
                    json = json.results;
                    let span = document.getElementById('news1');
                    let delimiter = ' - ';
                    for (let i in json) {
                        let article = json[i];
                        let a = document.createElement('a');
                        a.href = article.link;
                        a.appendChild(document.createTextNode(article.title));
                        span.appendChild(a);
                        span.innerHTML += delimiter;
                    }
                });
        </script>

Sind beide Ansätze zu 100% äquivalent - oder gibt es Unterschiede? Hat ein a-Element nicht auch ein text-Property?
 
um zu wissen welcher Ansatz besser ist (vielleicht auch ein dritter?) muss man leider wissen: was willst erreichen und vor allem warum.
Auf den ersten Blick sieht es so aus als willst du mehrere Dinge gleichzeitig tun. Aber keine Ahnung.
Ich spare mir deinen Post eine Coding AI zu geben - sie wird eine Meinung haben. Nur ist sie bei dieser Ausgangslage nicht hilfreich.
 
Der zweite Ansatz ist etwas besser, hat aber noch Luft zur Optimierung. Versuche 100%ig auf DOM-Ebene zu arbeiten.

https://developer.mozilla.org/de/docs/Web/API/Element/innerHTML
1765188045155.png
 
  • Gefällt mir
Reaktionen: e_Lap und kali-hi
Wo bin ich hier schrieb:
hat aber noch Luft zur Optimierung
Zum Vergrößern anklicken....
Es ist aber nur ein fester Delimeter... sprich, das, was mit innerHTML hinzugefügt wird, wird nicht dynamisch generiert. Bitte Alternativen nennen.

@dermoritz Eine minimale Transferleistung kann ich dir leider nicht abnehmen. Ich bin sicher, mit ein bisschen Anstrengung schaffst auch du das.
Ergänzung ()

@Wo bin ich hier Variante 2 geht nur mit innerHTML für den Trenner, gerade ausprobiert.

Bleibt also noch die Frage, ob
a.appendChild(document.createTextNode(article.title));
vermieden werden kann.
 
Zuletzt bearbeitet:
kali-hi schrieb:
Variante 2 geht nur mit innerHTML für den Trenner, gerade ausprobiert.

Bleibt also noch die Frage, ob
a.appendChild(document.createTextNode(article.title));
vermieden werden kann.
Zum Vergrößern anklicken....
Text, hier den Delimiter, kann man auch einfach mit .append anhängen und für den Titel braucht man auch kein extra ein erzeugtes Textnode als Child anhängen, man auch einfach die .text Property setzen kann. Das "let article = json" müsste sich auch einsparen lassen, da man mit einer for .. of Schleifen direkt über die Elemente eines Array iterieren kann.

HTML: 
<body>
    <span id="news1"></span>

    <script>
        const span = document.getElementById('news1');
        const delimiter = ' - ';

        for (let article of json) {
            let a = document.createElement('a');
            a.href = article.link;
            a.text = article.title;
            span.appendChild(a);
            span.append(delimiter);
        }
    </script>
</body>
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: kali-hi und e_Lap
@mibbio Danke, ich habe das 1:1 übernommen und zumindest im Chrome funktioniert es (auch mit Sonderzeichen und/oder Kyrillisch).

Ich habe noch eine Frage:

Javascript: 
    function fetchResults(index) {
        return fetch('headlines-' + index + '.json')
            .then(function (response) {
                if (response.status == 200) {
                    return response.json();
                } else {
                    throw new Error('News index not found.');
                }
            })
            .then(function (json) {
                return json.results;
            })
            .catch(function (error) {
                console.log('Fetch error:', error);
                return null;
            });
    }

Ich möchte, dass das "Promise" einfach null zurückgibt, wenn Artikel mit 404 nicht vorhanden sind. Aber JS ignoriert diesen Wunsch... in der Browser-Konsole erscheint immer:

1765198223387.png


das ist aber nicht beabsichtigt, weil das 404 mit zum normalen Programmablauf gehört. Hast du eine Idee? Ist das ein Anti-Pattern?
 
kali-hi schrieb:
Ich möchte, dass das "Promise" einfach null zurückgibt, wenn Artikel mit 404 nicht vorhanden sind. Aber JS ignoriert diesen Wunsch...
Zum Vergrößern anklicken....
Der return Aufruf wird nicht ignoriert, sondern der Promise.catch() funktioniert nur nich so, dass ein return Statement direkt den Wert zurückliefert.

Ein Promise.catch() gibt instant ein neues Promise mit dem Status "pending" zurück, damit man es weiter verketten kann. Beim Verlassen des catch() wird das Promise dann mit dem Rückgabewert des catch() aufgelöst.

https://developer.mozilla.org/en-US...Reference/Global_Objects/Promise/catch#syntax

Du müsstest also das vom catch() erzeugte Promise durch ein weiteres then() behandelt.
 
  • Gefällt mir
Reaktionen: kali-hi
@mibbio Thx, könntest du vielleicht ein Beispiel dafür angeben, console.log('Fetch error:', error); kann ganz weg, ich möchte einfach nur, dass (stillschweigend) null zurückgegeben wird, von der Funktion.
 
Beispiele gibt's doch in der verlinkten Doku unter "Examples". Im Prinzip reicht dann nach dem .catch() ein weiters .then() mit leeren Funktionen für onFulfilled und onRejected.
 
Das ändert leider nichts an meinem Problem, trotzdem danke.
Ergänzung ()

Habe die SO AI mal nach "How can I ignore a JavaScript fetch error and return null instead?" gefragt, und sie hat keine Lust, zu antworten... :D

Also scheint das doch ein Anti-Pattern zu sein.
 
Zuletzt bearbeitet:
Hier ist doch noch eine Antwort... funktioniert aber leider auch nicht. Naja, dann geht das halt nicht
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 170 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz