JavaScript动态创建网页内容的几种方法

最新推荐文章于 2023-08-11 13:20:40 发布

@cooltea

最新推荐文章于 2023-08-11 13:20:40 发布

阅读量2.9k

点赞数 6

文章标签： javascript

本文链接：https://blog.csdn.net/apple_54470279/article/details/124389177

版权

document.write()

这个方法只适合在页面加载期间向页面写入内容。如果页面加载后使用该方法，会覆盖网页所有内容。

<!-- 省略部分代码 -->
<body>
    <div>我是div标签里的内容</div>
    <p>我是p标签里的内容</p>
    <button>点击</button></br>
    <script>
        document.write("我在页面加载期间通过write()方法写入");
        document.querySelector('button').addEventListener('click', function() {
            document.write("我通过点击按钮写入，并且覆盖了页面所有内容！");
        })
    </script>
</body>

执行结果：

Element.innerText()

这个方法只适合向页面写入纯文本内容，并且会覆盖该元素节点下的所有内容。

<body>
    <button>点击</button></br>
    <p>我是p标签里的内容</p>
    <div>我是div标签里的内容</div>
    <script>
        document.querySelector('button').addEventListener('click', function() {
            document.querySelector('p').innerText = "我是p标签里的内容";
            document.querySelector('div').innerText = "<span>我向div标签里添加了span标签</span>";
        });
    </script>
</body>

执行结果：

Element.innerHTML()

这个方法既可以向页面写入文本内容，也可以写入元素内容，并且会覆盖该元素节点下的所有内容。

// 修改上面的代码
document.querySelector('button').addEventListener('click', function() {
    document.querySelector('p').innerHTML = "我是p标签里的内容";
    document.querySelector('div').innerHTML = "<span>我向div标签里添加了span标签</span>";
});

执行结果：

document.createElement()

使用这个方法创建的元素，需要通过 appendChild()、insertBefore() 或 replaceChild() 方法添加到指定的文档树节点中，不会覆盖原有的元素。

<body>
    <button>点击</button></br>
    <p>我是p标签里的内容</p>
    <div>我是div标签里的内容</div>
    <script>
        document.querySelector('button').addEventListener('click', function() {
            let span = document.createElement('span');
            span.innerHTML = "我是创建的span节点，会被添加到div标签中。";
            document.querySelector('div').appendChild(document.createElement('br'));
            document.querySelector('div').appendChild(span);
        });
    </script>
</body>

执行结果：

@cooltea

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript动态创建网页内容的几种方法

document.write()这个方法只适合在页面加载期间向页面写入内容。如果页面加载后使用该方法，会覆盖网页所有内容。Element.innerText()这个方法只适合向页面写入纯文本内容，并且会覆盖该元素节点下的所有内容。Element.innerHTML()这个方法既可以向页面写入文本内容，也可以写入元素内容，并且会覆盖该元素节点下的所有内容。
复制链接

扫一扫