innerHTML mit HTML Code nutzen?

html.de-Forum JavaScript
1

Hallo,
ich würde gerne innerhtml mit HTML Code nutzen. Aktuell funktioniert es leider nur mit normalem Text. Mein Code:
[HTML]eingabe.document.execCommand(‚insertHTML‘, false, ‚

‘);[/HTML]Die Syntax funktioniert zwar, allerdings nur bei Text. Ansonsten wird der Code wie folgt etwa aussehen:

<div style="text-align: center;"><p onclick="document.getElementById('eingabe').innerHTML='<div style=" text-align:="" center;="">Messageb<br>'"></p></div>Wie zu sehen ist, wird der HTML Code nicht richtig im InnerHTML Tag eingesetzt. Wisst ihr, wie dieser Fehler zu beheben wäre?

2

An dem Code gibt es nicht viel zu sehen, da er so nicht funktionsfähig ist. Es wäre hilfreich, wenn wir nachvollziehen könnten, was du tust.

Aber vielleicht hilft dir ja schon ein Blick in die Fehlerkonsole, der zweite Code enthält Fehler die dort eigentlich auch angezeigt werden sollten.

3

Der erste Code ist der JavaScript Code einer Funktion. Dieser wird bei einem Klick auf einen Button ausgeführt. Ich habe folgenden Aufbau:

  1. ein Eingabefeld namens eingabe
  2. ein Eingabefeld, wessen inhalt (der Inhalt ist HTML Code) in contentDocument gespeichert wird.

Die Ausgabe soll wie folgt aussehen:

<p onclick="document.getElementById('eingabe').innerHTML='hier der HTML Code'>. <p>Damit soll dann der Inhalt geändert werden.</p> <p>Die Ausgabe ist aber falsch.[FONT=Verdana] Es wird wie im zweiten Codeschnipsel ausgegeben, welcher syntaktisch nicht richtig ist. Also es wird im zweiten Schnipsel der Aufruf der Funktion gezeigt bzw. die Ausgabe.<br> Ich hoffe, nun ist es etwas besser verständlich.<br> [/FONT]</p>
4

Absolut nicht.

Wie gesagt, es wäre hilftreicher wenn wir es nachvollziehen könnten was du machst. Ich kann jetzt versuchen nach deiner Beschreibung einen Testcase zu basteln. Nur, der würde funktionieren und ich kann dein Problem immer noch nicht lösen. zeig uns doch einfach was du machst.

5

Ich erzeuge ein onclick-Event, womit der Text geändert werden soll. Ich weiß nicht, ob mein Editor helfen würde. Der zweite Code sollte syntaktisch richtig ausgegebenen werden. Also mit dem ersten Code soll der zweite Code syntaktisch richtig werden. Es liegt wahrscheinlich an den Anführungszeichen, da diese wohl noch nicht richtig gesetzt wurden im ersten Code. Editor: http://vision-sportal.de/editor/

6

Bei Text sieht die Ausgabe wie folgt etwa aus:

Nur beim HTML Code wird es falsch darstellt. Wie kann ich den HTML Code einfach dort in innerHTML verwenden? Ist es möglich? Oder geht es gar nicht? Gibt es da Tricks?

Oder wie kann ich einen Text ändern, wobei der neue Text HTML Code ist?

7

Ja das ist möglich. Aber wie du schon merkst kann das extrem kompliziert werden. Einfacher ist es die Elemente zu erzeugen und in den Baum einzuhängen.

8

Wie würde das genau gehen? Ist es nicht auch so wie ich es versuche möglich, nur dass die Anführungszeichen anders gesetzt werden?

9

Das geht so: objekt.innerHTML = '<tag attribut="wert">';

10

Wäre das Problem nicht einfach wie folgt zu lösen?
[HTML]function changeText(){
document.getElementById(„eingabe“).innerHTML = ‚

hi
‘;
}
[/HTML]Ich habe jetzt nicht ganz auf die richtigkeit vom Code geachtet. Und dann wird bei Onclick die Funktion aufgerufen. Sollte es so gehen? Dass ich dann folgendes mache:
[HTML]eingabe.document.execCommand(‚insertHTML‘, false, ‚<p onclick=„changeText();“‘);
[/HTML]Vielleicht auch noch mit einem Parameter. Sollte so etwas klappen?
Es sähe dann so vom Code her aus:

<p onclick="funktionsaufruf();">old</p> // wobei dabei der Inhalt so gesetzt wird: this.innerHTML = '<tag>...' Kann es Probleme beim Style Tag geben? Da dort ja ein Semikolon ist? Oder wird es einfach übernommen?

11

Was du mit dem execCommand vor hast, ist mir nicht klar. Gibt es den Befehl innerHTML überhaupt? Warum über diese Funktion?

und wie schon einmal gesagt, komplexere Elemente lassen sich einfacher mit DOM-Methoden erzeugen und einbauen.

Nein, das Semikolon spielt keine Rolle und ja dein erstes Beispiel funktioniert. Ich frage mich aber worauf du hinaus willst?

12

Wisst ihr, was hierbei noch falsch ist?

neu';">alt

Muss ich da noch Backslashes setzen oder was ist da syntaktisch falsch an diesem Code? Denn an dieser Form baut der weitere Code auf.
13

Ist das nicht ziemlich genau das Ausgangsproblem? Da passt irgendwas mit den Anführungszeichen nicht. Was genau, lässt sich ohne weiteren Kontext nicht sagen.

14

Welche Informationen werden denn noch konkret benötigt?

15

Zum Beispiel sowas:

[code][/code]

Dann hätten wir die Chance, zu wissen, dass hier etwas einer JS-Variable zugewiesen werden soll.

Falls es um HTML geht, probier es mal so:

<p onclick="this.innerHTML= '<div style=\"hi\">neu</div>';">alt</p>
16

Wenn ich deinen Code in der HTML Ansicht meines Editors einfüge und in die normale Ansicht wechsle, steht dort folgender Inhalt:

neu';">alt Das ist somit wohl syntaktisch nicht richtig.

Ich habe es nun etwas weiter geschafft. Nun funktioniert folgender Code:

<p onclick="this.innerHTML='<div style=\'text-align: center;\'>Messageb</div>';">hi</p>Allerdings sollte es so sein, dass es funktioniert, wenn der Inhalt vom innerHTML Befehl in Doppelten Anführungszeichen steht.
Also in solch einer Form:

 <p onclick="this.innerHTML='<div style=[B]"[/B]text-align: center;[B]"[/B]>Messageb</div>';">hi</p>

Wisst ihr, wie so etwas geht? Denn der eingehende Text ist in der oben genannten Form und ohne Backslashes, also nicht maskiert.

17

Mach das mit dem DOM, dann geht’s einfacher.

18

Ich muss jetzt nur noch den String bzw. die Anführungszeichen im String maskieren. Der String ist in der Variable var contentDocument gespeichert. Gibt es eine Funktion oder eine andere Möglichkeit, die Zeichen " im String durch " zu ersetzen, also zu maskieren bzw. zu escapen? Es soll automatisch geschehen, deshalb suche ich nach einer Funktion in Javascript. Da es Clientseitig ablaufen soll, muss es in JavaScript sein.

Könntet ihr mir da helfen? Denn dann wäre das Problem gelöst.

19

Ich habe das Problem gelöst. Ich habe mittels addslashes nun die Anführungszeichen escaped und es klappt. Hier mein Code:
[HTML]function setzeOnclicktext(){
var oldtext = prompt(‚Geben Sie den alten Text ein:‘, ‚‘);
if(oldtext != null)
var contentDocument = document.getElementById(‚newtext‘).contentWindow.document.body.innerHTML;
contentDocument = addslashes(contentDocument,2);
eingabe.document.execCommand(‚insertHTML‘, false, „

“+oldtext+„

“);
}[/HTML]
Vielen Dank für die schnelle und vor allem kompetente Hilfe. Dankeschön :slight_smile: