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