1017

Wie könnte ich Folgendes erreichen:

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

Mit jQuery wo regTitleist meine div ID?

javascript jquery html innerhtml Tonyf
quelle

1530

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

Zed
quelle

320

Die Funktion html () kann HTML-Zeichenfolgen annehmen und ändert die .innerHTMLEigenschaft effektiv .

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

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

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

Zombat
quelle

12

"aber behalten Sie die HTML-Struktur". können Sie erklären?

Anoop Joshi

10

In der jQuery-API-Dokumentation ( api.jquery.com/text ) text()wird Folgendes unterschieden : Unlike the .html() method, .text() can be used in both XML and HTML documents.. Darüber hinaus laut stackoverflow.com/questions/1910794/… , jQuery.html() treats the string as HTML, jQuery.text() treats the content as text.

Gorgsenegger

1

@ AnoopJoshi stackoverflow.com/questions/1910794/…

Machavity

69

Wenn Sie stattdessen ein jquery-Objekt haben, das Sie anstelle des vorhandenen Inhalts rendern möchten: Setzen Sie dann einfach den Inhalt zurück und hängen Sie den neuen an.

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

Oder:

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

Cine
quelle

17

Guter Ort zu verwendenitemtoReplaceContentOf.empty();

Kevin Panko

Ist newcontentein jQuery-Objekt? Das ist nicht klar.

kmoser

@kmoser Im ersten Beispiel ist newcontent tatsächlich ein jquery-Objekt. Im zweiten Beispiel kann es vom Typ htmlStringoder Elementoder Textoder Arrayoder jQuerygemäß api.jquery.com/append

Cine

27

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();

Däne
quelle

11

Antworten:

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

Erläuterung:

$ist äquivalent zu jQuery. Beide repräsentieren dasselbe Objekt in der jQuery-Bibliothek. Das "#regTitle"Innere der Klammer wird als Selektor bezeichnet, der von der jQuery-Bibliothek verwendet wird, um zu identifizieren, auf welche Elemente des HTML-DOM (Document Object Model) Sie Code anwenden möchten. Das #Vorher regTitlesagt jQuery, dass dies regTitledie ID eines Elements im DOM ist.

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

Webeng
quelle

11

Es gibt bereits Antworten, die angeben, wie der innere HTML-Code eines Elements geändert werden kann.

Aber ich würde vorschlagen, dass Sie eine Animation wie Ausblenden / Einblenden verwenden sollten, um HTML zu ändern, was einen guten Effekt von geändertem HTML bietet, anstatt sofort inneres HTML zu ändern.

Verwenden Sie die Animation, um Inner HTML zu ändern

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

Wenn Sie viele Funktionen haben, die dies benötigen, können Sie eine allgemeine Funktion aufrufen, die das innere HTML ändert.

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

Somnath Muluk
quelle

11

Sie können entweder die HTML- oder die Textfunktion in jquery verwenden, um dies zu erreichen

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

ODER

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

Jitendra Varshney
quelle

9

Mit jQuery's .html()können Sie den Inhalt übereinstimmender nicht leerer Elemente festlegen und abrufen ( innerHTML).

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

Pratik
quelle

Die offene und geschlossene Klammer nach HTML hat mich gerettet. Denken Sie also daran, Leute, diese beiden sind wichtig.

Gellie Ann

9

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>

Erweitern Sie das Snippet

Nikit Barochiya
quelle

7

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

Al.UrBasebelon Tomeh
quelle

3

Nur um einige Einblicke in die Leistung 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 stellte sich heraus, dass das "Neuerstellen" des Elements und das Injizieren in das DOM viel schneller war als jede der vorgeschlagenen Methoden zum Aktualisieren des DOM-Inhalts.

Also 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>

Erweitern Sie das Snippet

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

Der Nachteil ist, dass Sie mehr Arbeit haben, um das DOM und die Referenzen in Ihren Skripten zu behalten, die auf das richtige Objekt verweisen.

Pavel Donchev
quelle

3

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

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

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

Alireza
quelle

Wie ersetze ich innerHTML eines div mit jQuery?

Antworten:

Verwenden Sie die Animation, um Inner HTML zu ändern