Projekt-Anfragen: Tel: 07022/9319004 info@CodeDocu.de Software Entwicklung in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

jQuery: HTML in ein Element einfügen, jQuery.append() jQuery.empty()

 

Mit jQuery kann man dynamische HTML Elemente in ein HTML Element einfügen, indem man die Methoden jQuery.empty() und jQuery.appene(xxx) auf eine HTMLElement anwendet.

$("#ctlEditor_HTML").empty();

$("#ctlEditor_HTML").append(<p style="color:red"><b>test</b></p>);

 

Beispiel

In diesem Beispiel wird die Eingabe in einem Textfeld auf eine DIV Element als formatiertes HTML übertragen.

Somit kann man eine TextEditor überleiten in einen HTML Editor

HTML Input TextArea, Div mit ContentEditable=true

 

 

Ausführung des jQuery-Codes

Wenn man den Button mit der id="btnLoadHTML" clicked, dann wird die function load_HTML_to_Div() aufgerufen.

Die function load_HTML_to_Div() lädt den Text aus dem Text-Eingabefeld: ctlEditor_Text.

Dann wird der Inhalt des Div-Element: ctlEditor_HTML gelöscht indem alle Child-Elemente entfernt werden.

Und abschliessend wird in das HTMLElement Div:ctlEditor_HTML neue Child-Elemente eingefügt mit der jQuery.append(HTML) Methode.

//----< events >----

$("#btnLoadHTML").click(load_HTML_to_Div);

//----</ events >----

 

//----< functions >----

function load_HTML_to_Div() {

        var sHTML = $("#ctlEditor_Text").val();

        $("#ctlEditor_HTML").empty();

        $("#ctlEditor_HTML").append(sHTML);

}

 

 

 

Komplettes Code Beispiel in jQuery, HTML

Anwendung: Asp net Core mvc, jQuery

@{

    Layout = null;

}

<div>

    <form asp-action="demo_jQuery_01_post">

        <div class="form-group">

            <input type="submit" value="Send" class="btn btn-default" />           

        </div>

        <br />

        <div class="form-group">

            Editor HTML (div)

            <br />

            <div contenteditable="true" id="ctlEditor_HTML" name="ctlEditor_HTML" style="height:100px;width:90%;overflow:auto;border:1px solid red;">

                @ViewData["Text1"]

            </div>

            <br />

           

 

            <br />

            Editor Text (textarea)

            <br />

            <textarea class="form-control" id="ctlEditor_Text"  name="ctlEditor_Text" style="height:100px;width:90%; overflow:auto;border:1px solid blue;color:gray;">

                    @ViewData["Text1"]

            </textarea>

        </div>

    </form>

    </div>

<button id="btnLoadHTML">load HTML to Div</button>

 

 

@*------------< jQuery-script >------------*@

<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>

<script>

    //----< events >----

    $("#btnLoadHTML").click(load_HTML_to_Div);

    $("#ctlEditor_HTML").on("input", transfer_Text)   

    //----</ events >----

 

 

    //----< functions >----

    function load_HTML_to_Div() {

        var sHTML = $("#ctlEditor_Text").val();

        $("#ctlEditor_HTML").empty();

        $("#ctlEditor_HTML").append(sHTML);

    }

 

    function transfer_Text() {

        var sText = $("#ctlEditor_HTML").html();

        $("#ctlEditor_Text").val(sText);

    }

 

 

    //----</ functions >----

</script>

@*------------</ jQuery-script >------------*@

 

Mobile
»
Upload mit Progress Bar
»
jQuery: Wert einer HTML Progress Anzeige einstellen
»
Dateien hochladen und anzeigen mit jQuery ajax, FileUpload, Anzeigen des json Results
»
jQuery: 1-Button File-Upload mit Autostart
»
Dateien mit Ajax hochladen : Asp Net Core MVC und jQuery
»
jQuery: Function vor Submit Senden ausführen
»
jQuery: function nach dem Laden einer Seite ausführen
»
jQuery: HTML Elemente in ein Element einfügen
»
jQuery: Paste Event beim Einfügen von Text in ein HTML Element
»
jQuery: Insert event bei Text Eingabe

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Info@CodeDocu.de