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


1017

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

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

jQueryを使用してregTitle私のdiv IDはどこですか?

回答:



320

htmlの()関数は、HTMLの文字列を取ることができ、かつ効果的に修正する.innerHTMLプロパティを。

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

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

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

12
「しかしhtml構造を維持してください」。説明できる?
Anoop Joshi 2015

10
jQuery APIドキュメント(api.jquery.com/text)と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
Gorgsenegger


69

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

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

または:

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

17
使用に適した場所itemtoReplaceContentOf.empty();
Kevin Panko

ですがnewcontentjQueryオブジェクトのですか?これは明確ではありません。
kmoser 2017

@kmoser最初の例では、newcontentは確かにjqueryオブジェクトです。2番目の例では、api、jquery.com / appendのようにタイプhtmlStringElementor TextArrayor jQuery、orのいずれかを使用できます
Cine

27

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

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

11

回答:

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

説明:

$と同等jQueryです。どちらもjQueryライブラリの同じオブジェクトを表します。"#regTitle"カッコ内はと呼ばれるセレクタあなたがにコードを適用したいHTML DOM(ドキュメントオブジェクトモデル)のどの要素(複数可)を識別するために、jQueryライブラリで使用されています。#前はregTitlejQueryの言っているregTitleDOM内の要素のidです。

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


11

要素の内部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);
    });
}


9

jQuery .html()は、一致する空でない要素(innerHTML)のコンテンツを設定および取得するために使用できます。

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

htmlの後の開き括弧と閉じ括弧は私を救いました。したがって、これらの2つが重要であることを覚えておいてください。
Gellie Ann、2016

9

$( 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>



3

パフォーマンスに関する洞察を追加するだけです。

数年前に、大きな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とスクリプト内の参照が正しいオブジェクトを指すようにする作業が増えることです。


3

jQueryには、テキストを処理するいくつかの関数があり、text()1つを使用する場合、それはあなたのために仕事をします:

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

また、htmlタグhtml()がある場合は、代わりに使用できます...

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.