js如何动态创建网页新元素

# js如何动态创建网页新元素

# 快速导航

# 前言

动态的创建新的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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# html代码

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

1
2
3
4
5
6

# 分析

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

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

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

留言

解答

← js如何通过id获取网页中的标签的内容 js如何删除一个元素 →