Frage Wie kann man innerHTML eines divs mit jQuery ersetzen?


Wie könnte ich Folgendes erreichen:

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

Verwenden von jQuery wo regTitle ist mein div ID?


857
2017-08-20 23:51


Ursprung


Antworten:


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

1286
2017-08-20 23:52



Das html () Funktion kann Zeichenfolgen von HTML nehmen und wird die .innerHTML Eigentum.

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

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

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

273
2017-08-20 23:52



Wenn Sie stattdessen ein jquery-Objekt haben, das Sie anstelle des vorhandenen Inhalts rendern möchten. Dann setze einfach den Inhalt zurück und füge den neuen hinzu.

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

Oder:

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

56
2017-08-11 10:34



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

22
2017-11-27 08:03



Antworten:

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

Erläuterung:

$ ist äquivalent zu jQuery. Beide repräsentieren dasselbe Objekt in der jQuery-Bibliothek. Das "#regTitle" innerhalb der Klammer heißt die Wähler Dies wird von der jQuery-Bibliothek verwendet, um zu ermitteln, auf welche Elemente des HTML-DOM (Document Object Model) Sie Code anwenden möchten. Das # Vor regTitle sagt jQuery das regTitle ist die ID eines Elements innerhalb des DOM.

Von dort wird die Punktnotation verwendet, um die html Funktion, die den inneren HTML-Code durch jeden Parameter ersetzt, den Sie zwischen die Klammern setzen, was in diesem Fall der Fall ist 'Hello World'.


8
2018-06-22 02:37



jQuery's .html() kann verwendet werden, um den Inhalt von übereinstimmenden nicht leeren Elementen (innerHTML).

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

7
2017-10-16 12:14



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

Aber ich würde vorschlagen, dass Sie eine Animation wie Fade Out / Fade In verwenden sollten, um HTML zu ändern, was eine gute Wirkung von geändertem HTML ergibt, anstatt sofort inneres HTML zu ändern.

Verwenden Sie die Animation, um Inneres 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 den inneren HTML-Code ändert.

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

7
2017-09-07 16:41



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

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

ODER

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

7
2018-02-03 06:15



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

  </head>
  <body>
    <div class="msg"></div>
  </body>
</html>

5
2018-03-17 05:36



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

3
2017-09-21 12:26



Nur um einige Performance-Einblicke hinzuzufügen.

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

Es schien so, als ob das Element neu erstellt und in das DOM eingefügt wurde, viel schneller als alle vorgeschlagenen Methoden, um den DOM-Inhalt zu aktualisieren.

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 in diesen Tagen schlau sein), aber wenn Sie nach Leistung suchen, kann es helfen.

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


2
2018-01-21 15:37