innerHtml:顾名思义,innerHtml就是html标签的内部内容。
例如:
把一个input标签里面的内容写到一个div标签里面。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerHtml标签</title>
<style>
#div1 {
width: 100px;
height: 100pt;
border: 1px solid gray;
}
</style>
<script>
window.onload = function () {
var oInput = document.getElementById('input1');
var oButton = document.getElementById('button1');
var oDiv = document.getElementById('div1');
oButton.onclick = function () {
oDiv.innerHTML = oInput.value;
}
}
</script>
</head>
<body>
<input type="text" id="input1" value="123456">
<input type="button" id="button1" value="设置文字">
<div id="div1">
</div>
</body>
</html>
代码说明:这里的
oDiv.innerHTML = oInput.value;
就是把input标签的内容赋值给div。
效果图:
初始图:
点击设置文字: