百度IFE学习笔记（二）js 添加DOM子节点

最新推荐文章于 2024-06-17 09:39:50 发布

原创最新推荐文章于 2024-06-17 09:39:50 发布 · 353 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被收录于：

6 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何使用JavaScript动态地向HTML文档中添加新的DOM节点，并解释了关键的DOM操作方法，如createElement、createTextNode及appendChild等。

需求页面如下：

<ul id="resort">
    <!--
    <li>第一名：北京空气质量：<b>90</b></li>
    <li>第二名：北京空气质量：<b>90</b></li>
    <li>第三名：北京空气质量：<b>90</b></li>
     -->

</ul>

js添加子节点：

var ul=document.getElementById("resort");
for(i=0;i<data.length;i++){
            var text_li = "第"+(i+1)+"名："+data[i][0]+"空气质量：";            
            var node_li=document.createElement("li");
            var textnode_li = document.createTextNode(text_li);
            node_li.appendChild(textnode_li);
            var node_b=document.createElement("b");
            var text_b=data[i][1];
            var textnode_b = document.createTextNode(text_b);
            node_b.appendChild(textnode_b);
            node1.appendChild(node_b);
            ul.appendChild(node_li);
        }

分析：（子节点需创建并绑定到父节点，才能在页面中显示）

DOM结构图：