js如何动态创建网页新元素-优快云博客

本文链接：https://blog.youkuaiyun.com/wzc_coder/article/details/127383433

本文介绍了JavaScript中两种动态创建DOM元素的方法：通过innerHTML和使用createElement()。innerHTML方式简单但效率较低，可能清除原有内容；createElement()则更灵活高效，适合频繁操作DOM的场景。同时，文章探讨了这两种方法在实际应用中的选择和性能考虑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

动态的创建新的DOM元素,是js操作网页对象的重要手段

实现代码

// 创建新元素
function createNewElements() {
    // 使用innerHTML创建新元素
    var p1 = document.getElementById('p1');
    // 设置innerHTML内存
    p1.innerHTML = "<span>我的dom文本1</span>"

    // 使用createElement来创建新元素
    var span = document.createElement("span");
    // 为新元素内容创建一个文本节点
    span.appendChild(document.createTextNode("我的dom文本2"))
    var p2 = document.getElementById("p2");
    // 挂载
    p2.appendChild(span);
}

html代码

<p>
    <input type="button" value="创建新元素" onclick="createElements()" />
</p>
<!--定义新元素挂载的容器元素---->
<p id="p1"></p>
<p id="p2"></p>

分析

创建新元素,有两种办法,一种是直接修改父级元素的innerHTML元素,第二种是使用createElement()函数来创建,再用appendChild()函数进行DOM元素的挂载

第一种方法用起来比较简单,也很好理解,但是需要修改整个父元素所包含的HTML内容,如果父元素原先就包含了一些HTML内容,在进行DOM挂载的话,执行效率会比较低

第二种方法比较灵活,效率比较高,但是使用起来比较复杂一些

如何在移动端web端禁止长按选择文字以及弹出菜单

2022-10-01

2022-09-30

阅

读原文，即可阅读原文