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);
}

html代码

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

分析

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

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

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