创建元素节点createElement 、文本节点createTextNode

最新推荐文章于 2023-11-09 09:20:03 发布

原创最新推荐文章于 2023-11-09 09:20:03 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

21 篇文章

订阅专栏

DOM对象

9 篇文章

订阅专栏

本文介绍如何使用JavaScript中的createElement和createTextNode方法创建元素节点和文本节点，并通过appendChild将它们添加到DOM树中。示例展示了创建链接及带有样式的文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

createElement 、createTextNode 都要结合 appendChild() 或 insertBefore()

元素节点createElement

<script type="text/javascript">
    var main = document.body;
    //创建链接
    function createa(url,text)
    {
        var a = document.createElement("a");
        a.href = url;
        a.innerHTML = text;
        a.style.color = "red";
        main.appendChild(a);
    }
    // 调用函数创建链接
    createa("http://www.imooc.com","慕课网");

</script>

文本节点createTextNode

<style type="text/css">

.message{    
	width:200px;
	height:100px;
	background-color:#333;
    
}
</style>
</head>
<body>
<script type="text/javascript">

    var element = document.createElement("p");
    element.className = "message";
    var textNode = document.createTextNode("I Love You");
    element.appendChild(textNode);
    document.body.appendChild(element);

</script> 

</body>

注意：innerHTML可以往里面添加标签以及标签里文本内容，而createTextNode呈现的是文本内容