在Javascript中创建和更改HTML元素

Create and change HTML elements in Javascript

本文关键字：HTML 元素 Javascript 创建      更新时间：2023-09-26

我有一个这样的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>

有人能解释一下吗？非常感谢！！

当您像这样为变量"element"赋值时：

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

"element"成为指向新创建的div的指针。每次引用"element"变量时，实际上都引用了"element"所指向的"div"对象。因此，当您这样做时：

element.className = 'test';

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

parent.appendChild(element);

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

但是，如果您为"元素"变量分配了一个新值，如下图所示：

element = document.createElement('p');

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

DOM中的元素除了可能具有className属性之外，没有其他意义上的类，无论是从JavaScript赋值还是从HTML标记中的class属性。当您在浏览器中查看"您的HTML"时，它实际上将DOM显示为线性化为HTML标记。这特别意味着，如果元素节点具有属性className，则该元素显示为具有class属性。这在HTML5CR中的class属性描述中得到了有效描述。这意味着设置className属性（HTML5中的"IDL属性"）也会设置class属性（"内容属性"）。

className属性引用HTML元素的class属性。

相关文章：