innerhtml は jquery メソッドですか?-jsチュートリアル-php.cn

innerhtml は jquery メソッドですか?

青灯夜游

リリース： 2021-11-12 18:33:11

オリジナル

2299 人が閲覧しました

innerhtml は jquery メソッドではなく、HTML DOM 属性、つまり JavaScript 属性です。この属性は要素 (サブ要素を含む) の内容を設定または返すために使用され、構文は "要素 object.innerHTML="コンテンツ値" または "ElementObject.innerHTML"。

innerhtml は jquery メソッドですか?

このチュートリアルの動作環境: 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(&#39;div1&#39;);
        var oSpan = document.getElementByldCspan1&#39;);
        var oText = document.getElementById(&#39;text1&#39;);
        var oBtn = document.getElementById(&#39;btn1.&#39;);
        oBtn.onclick = function(){
        if(!oText.value.match(/s*/)){ //使用正则表达式判断输入的是否为空字符
            //将文本框前的 label、输入的文本、换行标签以及div原来的内容一起作为div元素的内容            
            oDiv.innerHTML += oSpan.innerHTML + oText.value + &#39;<br>&#39;;
            oText.value = &#39;&#39;;   //发送信息后清空文本框
        }else{
            alert("请输入信息！&#39;);
        }
    }；
}；
</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 メソッドですか?