ホームページ >ウェブフロントエンド >jsチュートリアル >innerhtml は jquery メソッドですか?
innerhtml は jquery メソッドですか?
- 青灯夜游オリジナル
- 2021-11-12 18:25:312323ブラウズ
innerhtml は jquery メソッドではなく、HTML DOM 属性、つまり JavaScript 属性です。この属性は要素 (サブ要素を含む) の内容を設定または返すために使用され、構文は "要素 object.innerHTML="コンテンツ値" または "ElementObject.innerHTML"。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
innerhtml は jquery メソッドではなく、要素のコンテンツを設定または返すために使用される HTML DOM 属性です。
innerHTML 属性は、ラベル要素の開始タグと終了タグの間の HTML を設定または返します。
構文:
//设置元素内容 Object.innerHTML=text //返回元素内容 Object.innerHTML
以下では、例を使用して innerHTML 属性の使用法を紹介します。
入力が空でない場合、ユーザーが入力したテキストはテキスト ボックスの前のラベルに接続され、送信するたびに div に 1 行ずつ表示され、テキスト ボックスの内容は次のようになります。同時にクリアしました。入力が空の場合は、警告ダイアログ ボックスがポップアップ表示され、ユーザーにプロンプトが表示されます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用innerHTML属性设詈div元素内容</title>
<style>
div {width:240px; height:200px; background:#f1f1f1; border:1px solid #333; padding:10px;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oSpan = document.getElementByldCspan1');
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn1.');
oBtn.onclick = function(){
if(!oText.value.match(/s*/)){ //使用正则表达式判断输入的是否为空字符
//将文本框前的 label、输入的文本、换行标签以及div原来的内容一起作为div元素的内容
oDiv.innerHTML += oSpan.innerHTML + oText.value + '<br>';
oText.value = ''; //发送信息后清空文本框
}else{
alert("请输入信息！');
}
}；
}；
</script>
</head>
<body>
<div id="div1"> </div>
<span id="span1">妙味:</span>
<input id="text1" type="text"/>
<input id="btn1" type="button" value="发送"/>
</body>
</html>上記コードのif()判定文は、入力内容が空文字かどうかを正規表現を用いて判定しています。このコードは、oSpan.innerHTML と oDiv.innerHTML を使用して、span 要素と div 要素の内容をそれぞれ取得し、次に oDiv.innerHTML を使用して、span 要素と div 要素の内容、テキスト ボックスに入力された内容、および改行タグをdiv要素としてまとめて設定する内容です。
注: oDiv.innerHTML =oSpan.innerHTML oText.value は、oDiv.innerHTML=oDiv.innerHTML oSpan.innerHTML oText.value と同等です。
下の図は、テキスト ボックスに 2 行のテキストを入力し、送信ボタンをクリックした結果を示しています。
プログラミング関連の知識については、こちらをご覧ください。 プログラミング入門をご覧ください。 ！
以上がinnerhtml は jquery メソッドですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。