原生js的innerHTML用法示例

内容摘要

这篇文章主要为大家详细介绍了原生js的innerHTML用法示例，具有一定的参考价值，可以用来参考一下。

文章正文

篇文章主要为大家详细介绍了原生js的innerHTML用法示例，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记。上一篇简单提到了innerHTML，那么现在我就通过一个简单的模仿一下发消息的原理例子。接下来简单布局一下： html代码如下：


<div id="box"></div>
<span id="span1">张三：</span>
<input type="text" id="text1"/>
<input id="Btn" type="button" value="按钮" name=""/>

css也简单写一下： CSS代码如下：


<style>
    #box{width:250px;height:300px;border:1px solid #e5e5e5;background:#f1f1f1;}
</style>

布局展示如下：想要实现的效果就是在input里写内容，点击发送，便会在上面的框中显示出来；下面就是js了，看看如何运用innerHTML了：

JS代码如下：


/**
 * 
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
<script>
     window.onload= function(){
         var oBox=document.getElementById("box");
         var oSpan=document.getElementById("span1");
         var oText=document.getElementById("text1");
         var oBtn=document.getElementById("Btn");
         oBtn.onclick = function(){
             oBox.innerHTML =oBox.innerHTML  + oSpan.innerHTML +  oText.value + "<br/>";
             //oBox.innerHTML += oSpan.innerHTML + oText.value +  "<br/>";这是简便的写法，在js中 a=a+b ,那么也等同于 a+=b
             oText.value=""
         };
     }
</script>

这便是实现之后的效果:

注：关于原生js的innerHTML用法示例的内容就先介绍到这里，更多相关文章的可以留意

代码注释

上一篇原生js控制字体大小示例下一篇原生js属性值的添加，替换，修改等

作者：喵哥笔记

学的不仅是技术，更是梦想！