Maison > Article > interface Web > Exemple d'analyse de l'utilisation des attributs innerText et innerHTML dans les compétences javascript_javascript

Exemple d'analyse de l'utilisation des attributs innerText et innerHTML dans les compétences javascript_javascript

WBOYoriginal: 2016-05-16 15:59:231139parcourir

Les exemples de cet article décrivent l'utilisation des attributs innerText et innerHTML en javascript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Presque tous les éléments DOM ont des attributs innerText et innertHTML (notez la casse), qui se trouvent dans la balise element
Représentation texte et code source HTML, ces deux attributs sont lisibles et inscriptibles

innerHTML peut également remplacer createElement, qui est une création simple, étendue et responsable

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

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple complet de compétences control_javascript de notation par glissement de souris javascriptArticle suivant：Exemple complet de compétences control_javascript de notation par glissement de souris javascript

Articles Liés

Voir plus