zoukankan      html  css  js  c++  java
  • DOM元素的innerHTML属性

    所有流行的浏览器的DOM元素都支持一种叫做innerHTML的属性。

    这个属性最大的好处在于:它允许我们利用一种非常简单的方式来为元素分配内容。

    下面我们来举个例子

    实际的应用中,经常需要动态改变div的内容,我们知道,div是可以嵌套的,那么怎么动态地嵌套呢?

    我们举个增加名字列表的简单例子。

    网页代码如下:

    <div>
        姓名:
        
    &nbsp;
        
    <input type="text" id="txtName" name="txtName" />
        
    &nbsp;
        
    <input type="button" name="btnAdd" value="增加" onclick="addName('txtName','nameList');" />
        
    &nbsp;
        
    <input type="button" name="btnClear" value="清空" onclick="clearName('nameList');" />
        
    <br />
        名字列表:
        
    <div id="nameList"></div>
    </div>

    下面是主要的JS代码:

    <script type="text/javascript">
            
    function addDivTextByInnerHtml(el,text) {
                el.innerHTML 
    += "<div>" + text + "</div>";
            }
            
            
    function addName(nameId,listId) {
                
    var nameList = document.getElementById(listId);
                
    var name = document.getElementById(nameId).value;
                
                addDivTextByInnerHtml(nameList,name);
                
            }
            
            
    function clearName(listId) {
                
    var nameList = document.getElementById(listId);
                
                nameList.innerHTML 
    = "";
            }
    </script>
  • 相关阅读:
    java继承
    Linux下word转pdf以及unoconv中文乱码问题
    jquery点击事件捕获
    在Windows上玩TensorFlow(一)——安装Docker【转】
    php面试总结
    [转载] PHP 线程,进程和并发
    微信小程序数据解密
    sql基础整理
    PHP 底层的运行机制与原理【转载】
    react-native 运行原理【转载】
  • 原文地址:https://www.cnblogs.com/davidgu/p/1517189.html
Copyright © 2011-2022 走看看