web-dev-qa-db-ja.com

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

どうすれば次のことが実現できますか。

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

regTitleが私のdiv IDであるjQueryを使う？

javascriptjqueryhtmlinnerhtml
949
tonyf
$("#regTitle").html("Hello World");
1381
Zed

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

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

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

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

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

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

または

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

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

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

要素の内部HTMLを変更する方法を示す答えはすでにあります。

ただし、HTMLを変更するには、Fade Out/Fade Inのようなアニメーションを使用することをお勧めします。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);
    });
}
10
Somnath Muluk

答え： 

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

説明：

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

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

10
Webeng

あなたはそれを達成するためにjqueryでHTMLまたはテキスト関数を使用することができます

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

OR

$("#regTitle").text("hello world");
9
jitendra varshney

jQueryの.html()は、マッチした空でない要素（innerHTML）の内容を設定および取得するために使用できます。

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

例 

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

7
Nikit Barochiya
$("#regTitle")[0].innerHTML = 'Hello World';
5
Al.UrBasebelon Tomeh

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

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

4
Pavel Donchev

jQueryには、テキストを扱う関数はほとんどありません。もしtext()関数を使えば、それはあなたのために仕事をします。

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

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

1
Alireza