innerhtml是jquery方式么-JAVA编程网

WWW.lllT.neT

innerhtml并不是jquery方式，反而是HTML DOM属性，即JavaScript特性；该特性用以设定或回到原素的具体内容（包含子原素），英语的语法“原素目标.innerHTML="具体内容值"”或“原素目标.innerHTML”。

本实例教程实际操作自然环境：windows7系统软件、javascript1.8.5版、Dell G3电脑上。

innerhtml并不是jquery方式，反而是HTML DOM属性，用以设定或回到原素的具体内容。

innerHTML 特性可设定或回到标识原素的逐渐标记和终止标识中间的 HTML。

英语的语法：

//设定原素具体内容
Object.innerHTML=text

//回到原素具体内容
Object.innerHTML

下边根据实例来详细介绍 innerHTML 特性的应用。

当键入不以空时，客户填写的文字每回推送后会联接输入框前边的 label 一起一行行表明在 div 中，与此同时会清除输入框具体内容。假如键入为空，则弹出来提醒提示框提醒客户。

<!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。

下面的图所显示是在输入框中依次键入二行文字并点击推送按键的結果：