<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>innerHTML</title> <style> #div1{ width: 200px; height: 200px; border: 1px solid black; } </style> <script> window.onload = function(){ var div1 = document.getElementById("div1"); var btn1 = document.getElementById(‘btn1‘); var txt1 = document.getElementById(‘txt1‘); var text = ‘使用innerHTML给div标签中添加文本内容‘; btn1.onclick = function(){ /* 这里主要是想说明innerHTML的用法 不但可以添加文本内容, 同样也是可以添加页面的标签的. */ div1.innerHTML = ‘<h2>‘+txt1.value+‘</h2>‘+‘<p>‘+text+‘</p>‘; } } </script> </head> <body> <input id="txt1" type="text"> <input id="btn1" type="button" value="设置"> <div id="div1"></div> </body> </html>