zoukankan      html  css  js  c++  java
  • DOM编程之innerHTML和innerText操作div和span

    innerHTML
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			#div1{
    				background-color: aqua;	
    				 200px;
    				height: 200px;
    			}
    		</style>
      </head>
    	<body>
    		<script type="text/javascript">
    			window.onload = function(){
    				var btn = document.getElementById("btn");
    				btn.onclick = function(){
    					//设置div内容
    					//1、获取div对象
    					var divElt = document.getElementById("div1");
    					//使用innerHTML属性来设置元素内部的内容
    					divElt.innerHTML = "<font color='red'>这是innerHTML</font>";
    				}
    			}
    		</script>
    		<input type="button" value="设置div中的内容" id="btn" />
    		<div id="div1"></div>
    	</body>
    </html>
    

    在这里插入图片描述
    点击按钮:
    在这里插入图片描述

    innerText
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			#div1{
    				background-color: aqua;	
    				 200px;
    				height: 200px;
    			}
    		</style>
      </head>
    	<body>
    		<script type="text/javascript">
    			window.onload = function(){
    				var btn = document.getElementById("btn");
    				btn.onclick = function(){
    					//设置div内容
    					//1、获取div对象
    					var divElt = document.getElementById("div1");
    					//使用innerText属性来设置元素内部的内容
    					divElt.innerText = "<font color='red'>这是innerText</font>";
    				}
    			}
    		</script>
    		<input type="button" value="设置div中的内容" id="btn" />
    		<div id="div1"></div>
    	</body>
    </html>
    

    在这里插入图片描述

    innerText和innerHTML属性的区别

    相同点:都是设置元素内部的内容。
    不同点:innerHTML会把后面的"字符串“当做一段HTML代码解释并执行。innerText是即使后面是一段HTML代码,也只是将其当做普通的字符串来看待。

  • 相关阅读:
    poj1466
    vc剪贴板
    【转帖】BCGControlBar使用心得如何捕获Workspace bar类上的树控件的消息
    Windows API一日一练
    BCG 使用CBCGPToolbarFontSizeCombo 时下拉框无内容
    VB API教程 王国荣
    用API 现成的函数处理工程退出时的文件保存
    VC 剪贴板操作
    BCG中使用状态栏显示状态信息
    界面库
  • 原文地址:https://www.cnblogs.com/yu011/p/13611039.html
Copyright © 2011-2022 走看看