jsでhtml要素の内容を変更するにはどうすればよいですか?コンテンツを変更するための HTML DOM 実装

青灯夜游

リリース： 2018-10-09 14:22:23

オリジナル

18797 人が閲覧しました

js で html 要素のコンテンツを変更するにはどうすればよいですか?この章では、HTML DOM を使用して js 内の html 要素のコンテンツを変更する方法を紹介します。困っている友人は参考にしていただければ幸いです。

まず理解する必要がありますHTML DOMとは何ですか? HTML DOM の役割は何ですか?

HTML DOM (Document Object Model の略) は、Web ページが読み込まれると、ブラウザによってそのページのドキュメントオブジェクトモデルが作成されます。

HTML DOM モデルは、 オブジェクトの tree として構築できます。以下に示すように:

jsでhtml要素の内容を変更するにはどうすればよいですか?コンテンツを変更するための HTML DOM 実装

HTML DOM を通じて、JavaScript HTML ドキュメント内のすべての要素にアクセスでき、動的 HTML を作成するための十分な機能を取得できます。 HTML DOM を通じて、JavaScript は次の機能を実現できます。

js はページ内のすべての HTML 要素を変更できます。 js はページ内のすべての HTML 属性を変更できます;
js はページ内のすべての CSS スタイルを変更できます;
js はページ内のすべてのイベントに反応できます。

js が HTML DOM

を通じて HTML 要素のコンテンツを変更する方法を詳しく紹介します。

1. js が HTML コンテンツを変更および追加する

js では、write() メソッドを使用して、HTML 式または JavaScript コードを HTML ドキュメントに直接記述することができます。

複数のパラメータ (exp1、exp2、exp3、...) を write() メソッドにリストすることができ、それらは順番にドキュメントに追加されます。

構文:

document.write(exp1,exp2,exp3,....)

ログイン後にコピー

説明:

DOM 標準に従って、write() メソッドはパラメーターとして 1 つの文字列のみを受け入れます。ただし、write() は任意の数のパラメータを受け入れることができます。

通常、write() メソッドは次の 2 つの方法で使用します。

1. このメソッドを使用してドキュメントに HTML を出力する場合

2. このメソッドを呼び出す場合。ウィンドウ以外のウィンドウまたはフレームに新規ドキュメントを作成します。注: このメソッドでは、必ず close() メソッドを使用してドキュメントを閉じます。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			document.write("<p>Hello World!</p> ","现在是：",Date());
		</script>
	</head>
</html>

ログイン後にコピー

レンダリング:

jsでhtml要素の内容を変更するにはどうすればよいですか?コンテンツを変更するための HTML DOM 実装 ##2. js で HTML 要素の内容を変更および置換します

js で html 要素のコンテンツを変更および置換する最も簡単かつ直接的な方法は、innerHTML 属性を使用することです。

構文:

document.getElementById(id).innerHTML=new HTML

ログイン後にコピー

document.getElementById(id) は、変更して id に置き換える必要がある HTML 要素を検索して取得し、innerHTML 属性を使用してコンテンツを変更します。置換された HTML 要素。

例 (

要素の内容を変更):

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

<p>"Old Header" 已被修改为 "New Header"。</p>

</body>
</html>

ログイン後にコピー

レンダリング:

#説明: jsでhtml要素の内容を変更するにはどうすればよいですか?コンテンツを変更するための HTML DOM 実装

例の HTML ドキュメントには、id="header" の