Heim > Web-Frontend > js-Tutorial > Ist innerhtml eine JQuery-Methode?

Ist innerhtml eine JQuery-Methode?

青灯夜游
Freigeben: 2021-11-12 18:33:11
Original
2318 Leute haben es durchsucht

innerhtml ist keine JQuery-Methode, sondern ein HTML-DOM-Attribut, also ein JavaScript-Attribut; dieses Attribut wird verwendet, um den Inhalt eines Elements (einschließlich untergeordneter Elemente) mit der Syntax „element object.innerHTML=“ festzulegen oder zurückzugeben „Inhaltswert“ oder „Elementobjekt“.

Ist innerhtml eine JQuery-Methode?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

innerhtml ist keine JQuery-Methode, sondern ein HTML-DOM-Attribut, das zum Festlegen oder Zurückgeben des Inhalts eines Elements verwendet wird. Das

innerHTML-Attribut legt den HTML-Code zwischen den öffnenden und schließenden Tags eines Tag-Elements fest oder gibt ihn zurück.

Syntax:

//设置元素内容
Object.innerHTML=text

//返回元素内容
Object.innerHTML
Nach dem Login kopieren

Im Folgenden werden Beispiele verwendet, um die Verwendung des innerHTML-Attributs vorzustellen.

Wenn die Eingabe nicht leer ist, wird der vom Benutzer eingegebene Text mit der Beschriftung vor dem Textfeld verbunden und nach jedem Senden Zeile für Zeile im Div angezeigt, und der Inhalt des Textfelds wird gelöscht zur gleichen Zeit. Wenn die Eingabe leer ist, wird ein Warndialogfeld angezeigt, um den Benutzer dazu aufzufordern.

<!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>
Nach dem Login kopieren

Die if()-Beurteilungsanweisung im obigen Code verwendet einen regulären Ausdruck, um zu beurteilen, ob der Eingabeinhalt ein Nullzeichen ist. Der Code verwendet oSpan.innerHTML und oDiv.innerHTML, um den Inhalt des span-Elements bzw. des div-Elements abzurufen, und verwendet dann oDiv.innerHTML, um den Inhalt des span-Elements und des div-Elements sowie den in das Textfeld eingegebenen Inhalt zu verwenden das Zeilenumbruch-Tag zusammen als festzulegendes div-Element.

Hinweis: oDiv.innerHTML+=oSpan.innerHTML+oText.value 等效于 oDiv.innerHTML=oDiv.innerHTML+oSpan.innerHTML+oText.value.

Das Bild unten zeigt das Ergebnis der Eingabe von zwei Textzeilen in das Textfeld und des Klickens auf die Schaltfläche „Senden“:

Ist innerhtml eine JQuery-Methode?

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonIst innerhtml eine JQuery-Methode?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage