238、javaScript对象---HTML DOM对象之innerHTML

最新推荐文章于 2021-07-03 12:00:58 发布

原创最新推荐文章于 2021-07-03 12:00:58 发布 · 296 阅读

1 ·

CC 4.0 BY-SA版权

05_javascript 专栏收录该内容

35 篇文章

订阅专栏

本文通过实例讲解了HTML DOM中innerHTML属性的使用方法，包括修改元素内容、替换元素和在原有元素基础上添加新元素。通过三个具体场景展示了innerHTML的强大功能。

注意：html DOM包含了核心DOM的所有特性,这里将特有

html DOM有一个可以获取和设置标签体的属性,就是innerHTML

1、它可以设置和获取元素（标签）的内容。

2、它可以完全把标签替换为别的标签。

3、它也可以实现在原来标签上加上新标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    1、点击文字替换掉文字-->
<!--    2、点击文字，把div直接换成输入框-->
<!--    3、点击文字产生在原来基础上，生成一个输入框-->
</head>
<body>
    <div id="id_div">
        你好世界
    </div>

    <script>
        var elem = document.getElementById("id_div");
        elem.onclick = function () {
            //1、点击文字替换掉文字
            // elem.innerHTML = "hello world"

            //2、点击文字，把div直接换成输入框
            //elem.innerHTML = "<input type = 'text' >";
            //3、点击文字产生在原来基础上，生成一个输入框
            elem.innerHTML += "<input type = 'text'>"
        }
    </script>
</body>
</html>