javascript - jQueryを使用してdivのinnerHTMLを置き換える方法は?

Question

どうすれば次のことを達成できますか:

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

jQuery を使用しregTitleて、私のdivID はどこにありますか?

Answer 1

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

Answer 2

html()関数は HTML の文字列を受け取ることができ、プロパティを効果的に変更します.innerHTML。

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

ただし、text()関数は、指定された要素の (テキスト) 値を変更しますが、html構造は維持します。

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

Answer 3

代わりに、既存のコンテンツの代わりにレンダリングするjQueryオブジェクトがある場合は、コンテンツをリセットして新しいコンテンツを追加します。

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

または：

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

Answer 4

これがあなたの答えです：

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

Answer 5

要素の内部 HTML を変更する方法を示す回答が既にあります。

ただし、Fade Out/Fade In などのアニメーションを使用して HTML を変更することをお勧めします。これにより、内部 HTML を即座に変更するのではなく、変更された HTML の効果が得られます。

アニメーションを使用して内部 HTML を変更する

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

これを必要とする関数が多数ある場合は、内部 Html を変更する共通関数を呼び出すことができます。

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

Answer 6

答え：

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

説明：

$と同等jQueryです。どちらも jQuery ライブラリ内の同じオブジェクトを表します。"#regTitle"括弧内はセレクターと呼ばれ、コードを適用する html DOM (Document Object Model) のどの要素を識別するために jQuery ライブラリーによって使用されます。#前は、DOM内の要素のIDであるregTitlejQueryに伝えています。regTitle

そこから、ドット表記を使用してhtml関数を呼び出します。この関数は、内側の html を、括弧の間に配置した任意のパラメーター (この場合は ) に置き換えます'Hello World'。

Answer 7

jQuery.html()を使用して、一致した空でない要素 ( innerHTML) の内容を設定および取得できます。

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

Answer 8

いくつかのパフォーマンスの洞察を追加するだけです。

数年前、大きな HTML/テキストをさまざまな HTML 要素に設定しようとして問題が発生したプロジェクトがありました。

要素を「再作成」してDOMに挿入することは、DOMコンテンツを更新するために提案された方法よりもはるかに高速であることがわかりました。

次のようなものです：

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>

パフォーマンスが向上するはずです。私は最近それを測定しようとはしていませんが (最近のブラウザーは賢いはずです)、パフォーマンスを探している場合は役立つかもしれません。

欠点は、スクリプト内の DOM と参照が正しいオブジェクトを指すようにするために、より多くの作業が必要になることです。

Answer 9

var abc = document.getElementById("regTitle");
abc.innerHTML = "Hello World";