cari

Rumah >hujung hadapan web >tutorial js >Contoh analisis penggunaan atribut innerText dan innerHTML dalam kemahiran javascript_javascript

Contoh analisis penggunaan atribut innerText dan innerHTML dalam kemahiran javascript_javascript

WBOY
WBOYasal
2016-05-16 15:59:231160semak imbas

Contoh dalam artikel ini menerangkan penggunaan atribut innerText dan innerHTML dalam javascript. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Hampir semua elemen DOM mempunyai atribut innerText dan innertHTML (perhatikan kesnya), yang berada dalam teg elemen
Perwakilan teks dan kod sumber HTML, kedua-dua atribut ini boleh dibaca dan boleh ditulis

innerHTML juga boleh menggantikan createElement, yang merupakan ciptaan yang ringkas, luas dan bertanggungjawab kendiri 

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Contoh lengkap kemahiran javascript tetikus gelongsor control_javascriptArtikel seterusnya：Contoh lengkap kemahiran javascript tetikus gelongsor control_javascript

Artikel berkaitan

Lihat lagi