有人能解释这个函数链的问题吗?没有获得预期的功能

我试图理解JS和jQuery，并有一些代码追加一个元素到DOM。我尝试创建一个文本节点并将其附加到元素节点，然后将其附加到第一个div标记，所有这些都在一个语句中。我知道这可能是不好的做法，但我只是想看看它是否可能。它似乎应该工作，因为createElement()返回新的元素对象，我调用appendChild()上的对象，它附加从createTextNode()返回的对象。然而，实际发生的是文本节点被追加，但不是作为一个div。由于某种原因，它似乎绕过了createElement函数。有人能解释一下为什么吗?我甚至把它放在括号里，以确保它先执行，但没有任何作用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
'use strict';
window.onload = () => {
let dir = console.dir;
let log = console.log;
$('h1').hide();
$('body').click(() => $('h1').show('slow', () => log('called')));
};
function appendDiv() {
document.getElementsByTagName('div')[0]
.appendChild((document.createElement('div'))
.appendChild(document.createTextNode('AppendedDiv')));
}
</script>
</head>
<body>
<h1 id="heading1" onclick="appendDiv();">JavaScript and jQuery Practice</h1>
<p>Practice using JavaScript and jQuery here!</p>
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>

appendChild返回附加的子元素—因此调用elem.appendChild(div.appendChild(text))实际上会将text附加到elem，而不是像您预期的那样将div附加到text子元素。你应该把它分开:

function appendDiv() {
const child = document.createElement('div');
child.appendChild(document.createTextNode('AppendedDiv'));
document.getElementsByTagName('div')[0]
.appendChild(child);
}

在第一个追加调用中有一个额外的()

括号不匹配。不是附加div，然后再附加AppendedDiv文本到它，而是将AppendedDiv文本附加到原始div。参见代码中的注释:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
'use strict';
window.onload = () => {
let dir = console.dir;
let log = console.log;
$('h1').hide();
$('body').click(() => $('h1').show('slow', () => log('called')));
};
function appendDiv() {
document.getElementsByTagName('div')[0]
.appendChild(document.createElement('div')) // <-- Match parentheses like this
.appendChild(document.createTextNode('AppendedDiv')); // <- Match
}
</script>
</head>
<body>
<h1 id="heading1" onclick="appendDiv();">JavaScript and jQuery Practice</h1>
<p>Practice using JavaScript and jQuery here!</p>
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>

这是一个很好的理由，把这些事情分成多个步骤，而不是一次完成，你认为"可能是坏的做法"是正确的!像这样微妙的bug很容易潜入。

最好的做法是把它分成几个步骤，像这样:

const wrapper = document.getElementsByTagName('div')[0];
const childDiv = document.createElement('div');
wrapper.appendChild(childDiv);
childDiv.appendChild(document.createTextNode('AppendedDiv'));

可读性强多了!

相关内容

最新更新

热门标签：