ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で innerHTML を使用する方法

JavaScript で innerHTML を使用する方法

不言
不言オリジナル
2018-12-22 11:03:3637469ブラウズ

innerHTML 属性を使用すると、HTML 要素の内容を変更できます。テーブル行の開始タグと終了タグの間に HTML を設定または返すことができます。この記事では、その使用方法を紹介します。 innerHTML を見てみましょう。具体的な内容を見てみましょう。

JavaScript で innerHTML を使用する方法 で innerHTML を使用する方法 で innerHTML を使用する方法

#innerHTML の書き方

要素には、innerHTML で指定した要素名を設定します。

element.innerHTML;

指定した要素のhtmlコードを変数に代入

以下のように書くことで、指定した要素のhtmlコードを変数sample1に代入します

var sample1 = element.innerHTML;

変数の値を指定した要素に置き換えます

以下のように書くと、変数sample2の内容を削除した上で、element要素に変数sample2の内容を表示することができます。要素要素。


element.innerHTML = sample2;

指定要素のクリア

「」を指定すると要素要素の内容をクリアできます。

element.innerHTML = “”;

innerHTML の使用例を具体的に見てみましょう

基本的なコードは次のとおりです

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<div id="txt">
      <div id="txt1">文字内容1 </div>
      <span id="txt2">文字内容2 </span>
    </div>
    <p>---------------------</p>
    <div id="innerHTMLtxt"></div>
</body>
</html>

実行結果は次のとおりです

##innerHTML 属性を使用した結果を見てみましょうJavaScript で innerHTML を使用する方法 で innerHTML を使用する方法 で innerHTML を使用する方法#

<script type="text/javascript">
		innerHTMLtxt.innerHTML="php中文网!";
	</script>

##実行結果は次のとおりです


#次に、innerHTML を使用して要素をクリアするコードを見てみましょう

<script>
  txt.innerHTML="";
</script>

実行結果は次のとおりですJavaScript で innerHTML を使用する方法 で innerHTML を使用する方法 で innerHTML を使用する方法

この記事はここで終わります。続きを読む エキサイティングなコンテンツについては、php 中国語 Web サイトの関連コラムに注目してください。 ! !

JavaScript で innerHTML を使用する方法

以上がJavaScript で innerHTML を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。