前端JavaScript——给页面上用代码添加一个标签，并在标签中写入文本内容（节点操作方法）

最新推荐文章于 2023-09-06 20:10:31 发布

tingyu_

最新推荐文章于 2023-09-06 20:10:31 发布

阅读量7.7k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/tingyu_/article/details/107216743

版权

web前端专栏收录该内容

15 篇文章 3 订阅

订阅专栏

效果：如下图面两个图所示

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("div1");
            oBtn.onclick = function(){
                // 1、创建span节点
                var node = document.createElement("span");
                // alert(node);
                // 2.在span节点中创建文本节点
                var oText = document.createTextNode("文本内容");
                // 3.将文本节点插入到span节点中
                node.appendChild(oText);
                oDiv.appendChild(node);
                
            }
        }
    </script>
</head>
<body>
    
    <div id="div1">
        <p>段落</p>
        <em>斜体</em>
    </div>
    <input type="button" value="按钮" id="btn">
    <!-- <button id="btn">按钮</button> -->
</body>
</html>

为了方便，在这里我们可以将生成一个带文本的标签封装成一个函数，具体代码如下：


        function createElementWithTxt(tagName,Txt){
            // 创建元素节点（标签）
            var node = document.createElement(tagName);
            // 创建文本节点
            var oTxt = document.createTextNode(Txt);
            // 将文本节点放到元素节点中
            node.appendChild(oTxt);
            // 返回元素节点
            return node;
        }

调用：

 window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("div1");
            oBtn.onclick = function(){
            // 调用
                var node = createElementWithTxt("span","文本内容");
                oDiv.appendChild(node);
                
            }
            
        }

tingyu_

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端JavaScript——给页面上用代码添加一个标签，并在标签中写入文本内容（节点操作方法）

效果：如下图面两个图所示具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script..
复制链接

扫一扫