it-swarm.com.de

Wie ersetzt man innerHTML eines div mit jQuery?

Wie konnte ich folgendes erreichen:

document.all.regTitle.innerHTML = 'Hello World';

JQuery verwenden Wo ist regTitle meine Div-ID?

923
tonyf
$("#regTitle").html("Hello World");
1381
Zed

Die Funktion html () kann HTML-Zeichenfolgen übernehmen und ändert die .innerHTML-Eigenschaft effektiv.

$('#regTitle').html('Hello World');

Die Funktion text () ändert jedoch den (Text) -Wert des angegebenen Elements, behält jedoch die html-Struktur bei.

$('#regTitle').text('Hello world'); 
292
zombat

Wenn Sie stattdessen ein Jquery-Objekt haben, möchten Sie anstelle des vorhandenen Inhalts rendern. Dann einfach den Inhalt zurücksetzen und den neuen anhängen.

var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);

Oder:

$('#regTitle').empty().append(newcontent);
60
Cine

Hier ist deine Antwort:

//This is the setter of the innerHTML property in jQuery
$('#regTitle').html('Hello World');

//This is the getter of the innerHTML property in jQuery
var helloWorld = $('#regTitle').html();
24
dane

Es gibt bereits Antworten, die zeigen, wie Inneres HTML des Elements geändert werden kann.

Aber ich würde vorschlagen, dass Sie Animationen wie Fade Out/Fade In verwenden sollten, um HTML zu ändern, was eine gute Wirkung von geändertem HTML bewirkt und das innere HTML sofort ändert.

Verwenden Sie die Animation, um Inner HTML zu ändern

$('#regTitle').fadeOut(500, function() {
    $(this).html('Hello World!').fadeIn(500);
});

Wenn Sie über viele Funktionen verfügen, die dies benötigen, können Sie eine allgemeine Funktion aufrufen, die das interne HTML ändert.

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}
10
Somnath Muluk

Antworten:

$("#regTitle").html('Hello World');

Erklärung:

$ entspricht jQuery. Beide repräsentieren dasselbe Objekt in der jQuery-Bibliothek. Der "#regTitle" in der Klammer wird als selector bezeichnet. Dies wird von der jQuery-Bibliothek verwendet, um zu ermitteln, auf welche Elemente des HTML-DOM (Document Object Model) Sie Code anwenden möchten. Der # vor regTitle sagt jQuery, dass regTitle die ID eines Elements im DOM ist.

Von dort wird die Punktnotation verwendet, um die Funktion html aufzurufen, die das innere HTML durch den Parameter ersetzt, den Sie zwischen die Klammern setzen, in diesem Fall 'Hello World'.

10
Webeng

um dies zu erreichen, können Sie in Jquery entweder HTML oder Text verwenden

$("#regTitle").html("hello world");

OR

$("#regTitle").text("hello world");
9

die Funktion .html() von jQuery kann verwendet werden, um übereinstimmende nicht leere Elemente (innerHTML) zu setzen und den Inhalt abzurufen.

var contents = $(element).html();
$(element).html("insert content into element");
8
Pratik

Beispiel

$( document ).ready(function() {
  $('.msg').html('hello world');
});
    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
      </head>
      <body>
        <div class="msg"></div>
      </body>
    </html>

7
Nikit Barochiya
$("#regTitle")[0].innerHTML = 'Hello World';

Nur um einige Einblicke in die Performance hinzuzufügen. 

Vor einigen Jahren hatte ich ein Projekt, bei dem wir Probleme hatten, einen großen HTML/Text auf verschiedene HTML-Elemente festzulegen.

Es schien, als sei das Element "neu erstellt" und in das DOM injiziert worden.

So etwas wie:

var text = "very big content";
$("#regTitle").remove();
$("<div id='regTitle'>" + text + "</div>").appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Sollte dir eine bessere Leistung bringen. Ich habe kürzlich nicht versucht, das zu messen (Browser sollten heutzutage klug sein), aber wenn Sie nach Leistung suchen, kann dies helfen.

Der Nachteil ist, dass Sie mehr Arbeit haben müssen, um das DOM und die Referenzen in Ihren Skripts auf das richtige Objekt zu verweisen.

4
Pavel Donchev

jQuery hat wenige Funktionen, die mit Text arbeiten. Wenn Sie text() verwenden, erledigt es die Arbeit für Sie:

$("#regTitle").text("Hello World");

Sie können stattdessen auch html() verwenden, wenn Sie einen html-Tag haben ...

1
Alireza