javascript_javascript 기술에서 innerText 및 innerHTML 속성 사용 분석 예
- WBOY원래의
- 2016-05-16 15:59:231139검색
이 기사의 예에서는 자바스크립트에서 innerText 및 innerHTML 속성을 사용하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
거의 모든 DOM 요소에는 요소 태그 내에 있는 innerText 및 innertHTML 속성(대소문자 참고)이 있습니다.
텍스트 표현과 HTML 소스 코드, 이 두 속성은 읽고 쓸 수 있습니다
innerHTML은 간단하고 광범위하며 자기 책임이 있는 생성인 createElement를 대체할 수도 있습니다.
<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>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.