老师请问下怎么通过js修改标签

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="test"></div>

    <script>
        // 3 - 6 编程练习
        // 我们学习了参数的解构赋值，那么下面让我们来定义一个函数，
        //参数是对象格式的，然后对参数进行解构，若解构不成功就使用默认值， 最后将结果输出。
        // 任务
        // （1）定义一个函数，对象作为参数。
        // （2）对参数指定默认值。
        // （3）将值输出，查看结果。
        // 任务提示
        // 可以结合前面所学的模板字符串，将对象中的值添加到html标签，追加到页面中
        var test = document.getElementById('test');
        const fun = ({ tagName = 'div', content = '默认值' }) =>
            test.innerHTML = `<${tagName} id="test">${content}</${tagName}>`; 

        fun({ tagName: 'p', content: 'ceshi' });
    </script>
</body>

</html>

问题描述：

我这样写的话只是在div里新增了一个p标签，请老师解惑谢谢

相关截图：

菜鸟瑞 2021-06-25

源自：模板字符串与箭头函数 2-6 模板字符串的应用

收起

1回答

好帮手慕久久回答被采纳获得+3积分 2021-06-25 13:40:20

同学你好，这样写是对的。老师不是很明白同学的意思，是想将div#test替换成其他标签吗？如果是的话，可以将新的html结构，设置给body元素，如下：

如果不是这样，可以详细说明一下，老师再为你解答。

祝学习愉快！

收起回答

菜鸟瑞提问者 #1

谢谢老师，明白了就是这个意思。。。就是相当于在页面中直接新增一个标签对吧

2021-06-25 13:49:09
好帮手慕久久回复提问者菜鸟瑞 #2

同学你好，是的。只有利用innerHTML往body中添加标签，才会将body中之前的标签替换掉。同学的写法，则是在div#test中新增标签。都是增加标签，只是标签所处的位置不同，因此效果不同。
祝学习愉快！

2021-06-25 14:05:37