javascript中innerText和innerHTML屬性用法實例分析_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript中innerText和innerHTML屬性用法實例分析_javascript技巧

May 16, 2016 pm 03:59 PM

javascript

本文實例講述了javascript中innerText和innerHTML屬性用法。分享給大家供大家參考。具體分析如下：

幾乎所有DOM元素都有innerText,innertHTML屬性(注意大小寫),分別是元素標籤內
的文字表示形式和HTML原始碼，這兩個屬性是可讀可寫的

innerHTML也可以取代createElement,屬於簡單，粗放型，後果自負的創建

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;测试(innerText和innerHTML)&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 function TestOutput() {
  var myLink = document.getElementById("lnk");
  alert('innerText--&gt;' + myLink.innerText);
  //得到百度网站
  alert('innerHTML--&gt;' + myLink.innerHTML);
  //得到百&lt;font color="red"&gt;度&lt;/font&gt;网站
 }
 function EditInnerText() {
  var myLink = document.getElementById("lnk");
  myLink.innerText = "凤凰网";
 }
 function EditInnerHTML() {
  var myLink = document.getElementById("lnk");
  myLink.innerHTML = "&lt;font color='blue'&gt;凤凰网&lt;/font&gt;";
 }
 function dynamicButtonClick() {
  alert('我是动态创建的');
 }
 function CreateButton() {
  var div = document.getElementById("divMain");
  div.innerHTML = "&lt;input type='button' value='单击我' 
  onclick='dynamicButtonClick()' /&gt;";
 }
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href="http://www.baidu.com" id="lnk"&gt;
百&lt;font color="red"&gt;度&lt;/font&gt;网站&lt;/a&gt;
&lt;input type ="button" value="测试" onclick="TestOutput()"/&gt;
&lt;input type="button"" value="修改InnerText" onclick="EditInnerText()"/&gt;
&lt;input type="button"" value="修改InnerHTML" onclick="EditInnerHTML()"/&gt;
&lt;div id="divMain"&gt;&lt;/div&gt;
&lt;input type="button" value="动态添加按钮" onclick="CreateButton()"/&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn