javascript: Text mit integrierten Links - innerHTML/DOM

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • javascript: Text mit integrierten Links - innerHTML/DOM

    Halloooh zusamm'

    Ich bin der Neue, nicht nur in diesem Forum, sondern auch bei Ajax.
    Meine Website wird viel Text (aber nicht zuviel :) ) enthaten in dem hyperlinks integriert sind. Der Text soll per Klicks geändert werden.
    Bisher war alles in html geschrieben.
    Jetzt sollen, wie bekannt, Js und DOM helfen, den Text mit seinen Links per Klick auszuwechseln.
    In html habe ich also <div><p>text<a href="">text</a>text</p></div>
    Wie spreche ich diese Struktur in Js an, ohne daß der Textfluß unterbrochen wird?

    Mit nächtlichem Gruß und DAnK

    Smeera
    Von einem der auszog, das Leben zu lernen und jetzt versucht er's halt mal so: Ajax, aber zunächst Klarheit mit html-Js-DOM

  • Aw: wie meinst Du das mit dem Textfluss?

    Hallo d0nUt,
    zunächst 'mal danke für Deine Antwort.
    Mit Deiner Lösung schreibe ich über html einen Text in die div.

    Ich brauche den Text jedoch immer nur dann, wenn er angefordert wird.
    In einer im file.js darüber liegenden Funktion sind 4 Buttons definiert. Bei Klick auf einen derselben erscheint im festgelegten div - Bereich der p mit dem ebenfalls im file.js geschriebenen und dazugehörigen Text auf der Website.

    In den Texten der NodeValues sollen die aktiven links so eingebunden sein, wie sie sonst im html div - Text mit einem <a> </a> erschienen wären.

    :D Smeera
    Von einem der auszog, das Leben zu lernen und jetzt versucht er's halt mal so: Ajax, aber zunächst Klarheit mit html-Js-DOM

  • Text in html ... js und links

    Hallo d0nUt,

    also, stelle Dir eine fein gestaltete Website vor, in der Mitte einen leeren Bereich, den Du für den Fall vorgesehen hast, daß ein Text aufgerufen wird, den Du über passende seitliche Buttons zugänglich machst.
    Beim ersten Aufruf steht in diesem Bereich NICHTS.
    Wenn ich jetzt Deinen Vorschlag nehme, dann steht der Text aber sofort in diesem Bereich.
    Der gehört zu einem <div> im html-Code.

    In meiner separaten js-Datei habe ich einige Text-Varianten per createTextNode geschrieben. Sie werden in den oben beschriebenen Bereich geholt, sobald der passende Button angeklickt wird, und der dargestellte Text verschwindet mit dem Aufruf des nächsten Textes.
    Sobald ich also Text in das html <div> einbaue, wird dieser immer dargestellt und läßt sich nicht von meinem aus der js-Datei geholten Text beeinflussen.

    Jetzt will ich aber an einigen Stellen in meinem Text aktive Verweise haben. Sobald ich mit dieser Absicht z. B. einen <a>...</a> in den js - Text (createTextNode ("textTextText") ) einbaue, wird dieser als Text angezeigt.

    Ich stehe also vor der Frage, ob ich meinen Text im js-file so auflöse, daß alles vor dem link als p definiert werden muß und alles nach dem Link auch. Wenn ja, dann hab' ich die Problematik des p, der mir eine Leerzeile schafft.

    Wie bekomme ich also kontinuierlichen Text mit eingebautem link ohne über html gehen, ohne eine Leerzeile oder einen Zeilenumbruch in Kauf nehmen zu müssen?

    Very Happy Smeera
    Von einem der auszog, das Leben zu lernen und jetzt versucht er's halt mal so: Ajax, aber zunächst Klarheit mit html-Js-DOM

  • das problem ist also das createTextNode() die HTML tags nicht interpretiert sondern in zeichen auflöst?

    da gibt es zwei lösungen:
    DOM:

    Quellcode

    1. elem = document.createElement("div");
    2. anchor = document.createElement("a");
    3. anchor.setAttribute("href","link");
    4. anchor.appendChild(document.createTextNode("ziel"));
    5. elem.appendChild(anchor);
    6. document.getElementById("hier").appendChild(elem);


    innerHTML :

    Quellcode

    1. elem = document.createElement("div");
    2. elem.innerHTML = '<b>adasd</b>';
    3. document.getElementById("hier").appendChild(elem);


    Voraussetzung ist ein Element mit der ID "hier"

    Quellcode

    1. <p id="hier" />


    DOM ist natürlich schöner, aber benötigt auch mehr verwaltungsaufwand