dom - 创建节点

最新推荐文章于 2022-08-08 15:04:09 发布

笑望灬星辰

最新推荐文章于 2022-08-08 15:04:09 发布

阅读量653

点赞数

本文链接：https://blog.csdn.net/hu1628299958/article/details/109447834

版权

DOM 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建节点</title>
</head>
<body>
    <div id="app"></div>
    <script>
        var app = document.getElementById("app")
        var h1 = document.createElement("h1");    //创建一个元素节点
		var ht = document.createTextNode("<strong style='color:red'>新节点h1内容</strong>"); //创建一个文本节点
        h1.appendChild(ht);
        // h1.innerHTML = "<strong style='color:red'>新节点h1内容</strong>"
        app.appendChild(h1)

        console.log(document.getElementsByTagName("h1")[0].innerHTML);  // 新节点h1内容

        /*
            createTextNode 与 innerHTML 的区别
            createTextNode 纯粹的文本    属于XML Dom
            innerHTML 可以嵌入元素节点   属于HTML Dom
        */
		
    </script>
</body>
</html>

在这里插入图片描述

题外话 svg 创建标签

用的方法是 document.createElementNS(命名空间, 标签名)
命名空间（PHP中有类似的， c++也有类似的）一般是svg.namespaceURI
这里的svg指的是svg标签对象通过 document.getElementById 等查找方法获取

后续会出一些关于svg的博文接近年关有点小忙

笑望灬星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom - 创建节点

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>创建节点</title></head><body> <div id=
复制链接

扫一扫