DOM元素的innerHTML属性

2022-02-23 05:07:55

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

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

下面我们来举个例子

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

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

网页代码如下：

<div>
    姓名:
     
    <input type="text" id="txtName" name="txtName" />
     
    <input type="button" name="btnAdd" value="增加" onclick="addName('txtName','nameList');" />
     
    <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>