回答:
htmlの()関数は、HTMLの文字列を取ることができ、かつ効果的に修正する.innerHTML
プロパティを。
$('#regTitle').html('Hello World');
ただし、text()関数は指定された要素の(text)値を変更しますが、html
構造は保持します。
$('#regTitle').text('Hello world');
text()
は異なりますUnlike the .html() method, .text() can be used in both XML and HTML documents.
。また、に記載stackoverflow.com/questions/1910794/...、jQuery.html() treats the string as HTML, jQuery.text() treats the content as text
。
代わりに、既存のコンテンツの代わりにレンダリングしたいjqueryオブジェクトがある場合:次に、コンテンツをリセットして新しいものを追加します。
var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);
または:
$('#regTitle').empty().append(newcontent);
itemtoReplaceContentOf.empty();
newcontent
jQueryオブジェクトのですか?これは明確ではありません。
htmlString
、Element
or Text
、Array
or jQuery
、orのいずれかを使用できます
回答:
$("#regTitle").html('Hello World');
説明:
$
と同等jQuery
です。どちらもjQueryライブラリの同じオブジェクトを表します。"#regTitle"
カッコ内はと呼ばれるセレクタあなたがにコードを適用したいHTML DOM(ドキュメントオブジェクトモデル)のどの要素(複数可)を識別するために、jQueryライブラリで使用されています。#
前はregTitle
jQueryの言っているregTitle
DOM内の要素のidです。
そこから、ドット表記を使用してhtml関数を呼び出します。この関数は、内部のhtmlを、括弧の間に配置したパラメーター(この場合は)に置き換えます'Hello World'
。
要素の内部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);
});
}
あなたはそれを達成するためにjqueryでhtmlまたはテキスト関数を使用できます
$("#regTitle").html("hello world");
または
$("#regTitle").text("hello world");
jQuery .html()
は、一致する空でない要素(innerHTML
)のコンテンツを設定および取得するために使用できます。
var contents = $(element).html();
$(element).html("insert content into element");
$("#regTitle")[0].innerHTML = 'Hello World';
パフォーマンスに関する洞察を追加するだけです。
数年前に、大きな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とスクリプト内の参照が正しいオブジェクトを指すようにする作業が増えることです。