个人中心
gpt4 book ai didi

javascript - 在 Javascript 中创建和更改 HTML 元素

转载 作者：行者123 更新时间：2023-11-30 17:16:51 27 4
gpt4 key购买 nike

我有这样一个 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id='first'>
        <div id='second'>
            <div id='third'>

            </div>
        </div>
    </div>

</body>
</html>

我也有一些像这样的 Javascript 代码:

var element = document.createElement('div');
element.id = 'forth';
var parent = document.getElementById('third');
parent.appendChild(element);

当我运行 javascript 代码时，HTML 应更改为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id='first'>
        <div id='second'>
            <div id='third'>
                <div id='forth'></div>
            </div>
        </div>
    </div>

</body>
</html>

然后在浏览器的控制台中输入下面这行之后:

element.className = 'test';

我希望只有 Javascript 中的变量“element”会发生变化并具有类名“test”。但是，当我检查我当前的 HTML 时，它也有类名“test”:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id='first'>
        <div id='second'>
            <div id='third'>
                <div id='forth' class='test'></div>
            </div>
        </div>
    </div>

</body>
</html>

谁能解释一下？非常感谢!!

最佳答案

当您像您一样为变量“元素”赋值时:

var element = document.createElement('div');

'element' 成为指向新创建的 div 的指针。每次引用“元素”变量时，实际上是在引用“元素”指向的“div”对象。所以当你这样做时:

element.className = 'test';

您将类名分配给您的 div，而不是某个抽象变量。由于您已将 div 附加到 HTML DOM:

parent.appendChild(element);

您可以立即在您的 html 代码中看到更改。

但是，如果您为“元素”变量分配了一个新值，如下所示:

element = document.createElement('p');

变量“element”将停止指向 div 对象并开始指向新创建的 p 对象。从这一点开始，所有应用于“元素”的方法都会影响“p”对象。

关于javascript - 在 Javascript 中创建和更改 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25963471/

27 4 0
文章推荐： c - fprintf 误解和未处理的异常
文章推荐： c# - XmlDocument() 内存泄漏
文章推荐： 创建随机位数组
文章推荐： c# - 我们如何获得对当前 HttpRuntime 的引用？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com