使用原生javascript / Html创建HTML树视图

使用原生 JavaScript/HTML 创建 HTML 树视图可以通过以下步骤实现：

创建一个 HTML 文件，可以使用以下代码作为起点：

<!DOCTYPE html>
<html>
<head>
    <title>HTML 树视图</title>
    <style>
        /* 树视图样式 */
        .tree {
            margin-left: 20px;
        }
        .tree ul {
            margin-top: 10px;
            position: relative;
            margin-left: 20px;
        }
        .tree ul li {
            list-style-type: none;
            position: relative;
            padding: 5px 0px 5px 20px;
        }
        .tree ul li::before {
            content: '';
            position: absolute;
            top: -7px;
            left: -20px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            width: 20px;
            height: 100%;
        }
        .tree ul li::after {
            content: '';
            position: absolute;
            top: 0px;
            left: -20px;
            border-left: 1px solid #ccc;
            width: 20px;
            height: 100%;
        }
        .tree ul li:last-child::before {
            height: 30px;
            border-radius: 0 0 4px 0;
            border-bottom: none;
        }
        .tree ul li:last-child::after {
            height: 30px;
            border-radius: 0 0 0 4px;
        }
        .tree ul li span {
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 5px 10px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="tree">
        <ul id="treeView">
            <!-- 树视图将在这里生成 -->
        </ul>
    </div>

    <script>
        // 在这里编写 JavaScript 代码
    </script>
</body>
</html>

在 JavaScript 部分，可以使用以下代码来创建 HTML 树视图：

// 获取树视图的容器元素
var treeView = document.getElementById('treeView');

// 定义树视图的数据
var treeData = [
    {
        label: '节点1',
        children: [
            {
                label: '子节点1'
            },
            {
                label: '子节点2'
            }
        ]
    },
    {
        label: '节点2',
        children: [
            {
                label: '子节点3'
            },
            {
                label: '子节点4'
            }
        ]
    }
];

// 递归函数，用于创建树视图的节点
function createTreeNode(parentElement, nodeData) {
    // 创建节点元素
    var li = document.createElement('li');
    var span = document.createElement('span');
    span.textContent = nodeData.label;
    li.appendChild(span);

    // 如果节点有子节点，则递归创建子节点
    if (nodeData.children && nodeData.children.length > 0) {
        var ul = document.createElement('ul');
        nodeData.children.forEach(function(childNodeData) {
            createTreeNode(ul, childNodeData);
        });
        li.appendChild(ul);
    }

    // 将节点添加到父节点中
    parentElement.appendChild(li);
}

// 创建树视图
treeData.forEach(function(nodeData) {
    createTreeNode(treeView, nodeData);
});

以上代码会根据提供的树视图数据，在页面中生成对应的 HTML 树视图。可以根据需要修改样式和数据结构，以满足具体的需求。

对于这个问题，腾讯云没有直接相关的产品或者产品介绍链接地址。