JS里面的innerHTML

Posted #安生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS里面的innerHTML相关的知识,希望对你有一定的参考价值。

1.在输入框输入一句话

2.点击按钮,输入框里面的内容会显示在下面

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 
 7 <script>
 8 /*
 9     HTML 的属性操作:读、写
10         属性名:
11         属性值:
12         
13         读操作:获取、找到
14         元素.属性名
15         
16         写操作:"添加?"、替换、修改
17         元素.属性名 = 新的值
18         
19         oP.innerHTML                    => 读取p里面所有的html代码
20         oP.innerHTML = 123;        => 替换p里面所有的html代码
21         
22 */
23 window.onload = function (){
24     var oBtn = document.getElementById(\'btn1\');
25     var oText = document.getElementById(\'text1\');
26     var oP = document.getElementById(\'p1\');
27 
28     oBtn.onclick = function (){
29         // oImg.src = oText.value;
30         // alert( oP.innerHTML );
31         oP.innerHTML = oText.value;
32     };
33 };
34 </script>
35 
36 </head>
37 
38 <body>
39 
40 <input id="text1" type="text" />
41 <input id="btn1" type="button" value="按钮" />
42 <p id="p1">这是一些文字</p>
43 
44 </body>
45 </html>
示例代码:

 

以上是关于JS里面的innerHTML的主要内容,如果未能解决你的问题,请参考以下文章

用js或者jquery把数据填充到div里面显示出来

JS中innerHTML 和innerText和value的区别

ajax 后用js的innerHTML 去添加数据然后再去取为空?

jquery基本操作

js_更新DOM

AJAX相关JS代码片段和部分浏览器模型