JavaScript が div コンテンツを変更する

フロントエンド開発では、多くの場合、ページ上のコンテンツ、特に div 要素のコンテンツを変更するために JavaScript を使用する必要があります。この記事では、JavaScript を使用して div 要素の内容を変更する方法を紹介します。

1.

innerHTML 属性を使用して innerHTML 属性を変更し、HTML コンテンツを取得または設定します。 innerHTML 属性を変更すると、div 要素の内容を変更できます。例:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "修改后的内容";
}
</script>

ボタンをクリックすると、div 内のコンテンツが「変更されたコンテンツ」に変更されます。

innerHTML 属性では、任意の HTML タグと属性を設定できることに注意してください。例:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "<p style='color: red;'>修改后的内容</p>";
}
</script>

この例では、div 内のコンテンツを赤い段落タグに変更します。

2. textContent 属性による変更

div 要素内のテキスト コンテンツのみを変更したい場合は、textContent 属性を使用できます。 textContent プロパティは、現在の要素のテキスト コンテンツを返すか設定します。ここで、HTML タグと属性は無視されます。例:

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").textContent = "修改后的文本内容";
}
</script>

ボタンをクリックすると、div 内のコンテンツが「変更されたテキスト コンテンツ」に変更されます。

3. createElement メソッドと appendChild メソッドによる変更

createElement と appendChild は、一般的に使用される 2 つの DOM メソッドで、新しい HTML 要素の作成と挿入に使用されます。これら 2 つの方法で div 要素の内容を変更できます。

たとえば、最初に新しい p タグを作成し、それを div 要素に追加できます。コードは次のとおりです。

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    var newP = document.createElement("p");
    var newText = document.createTextNode("修改后的内容");
    newP.appendChild(newText);
    document.getElementById("myDiv").appendChild(newP);
}
</script>

ボタンをクリックすると、div には「Modified Content」というコンテンツを持つ新しい p タグが追加されます。

createElement メソッドと appendChild メソッドによって追加される新しい要素は、元のコンテンツに基づいて新たに追加されることに注意してください。元のコンテンツを置き換える必要がある場合は、innerHTML または textContent 属性を使用できます。

要約すると、JavaScript を使用して div 要素の内容を変更すると非常に便利で、必要に応じてさまざまな方法を選択できます。 JavaScript に関するコンテンツの詳細については、引き続き私のブログをフォローしてください。

以上がJavaScript が div コンテンツを変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。