Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
532 views
in Technique[技术] by (71.8m points)

javascript - 元素cloneNode(deep)失败,仅在控制台中给出未定义的错误(Element cloneNode(deep) fails with only undefined error given in console)

I desire to run the method clondeNode() to clone aa series of HTML elements sharing the same class but fail with only undefined error given in console.(我希望运行方法clondeNode()来克隆一系列共享同一类的HTML元素,但是失败的原因是控制台中仅给出了未定义的错误。)

This is my HTML:(这是我的HTML:) <!DOCTYPE html> <html> <body> <section class="allEnglishSections"> <h2>Conditioning</h2> <table> <tr><th>English</tr></th> <tr><td>if</td></tr> <tr><td>else</td></tr> </table> </section> <section class="allEnglishSections"> <h2>Querying</h2> <table> <tr><th>English</tr></th> <tr><td>In plea</td></tr> <tr><td>In suggestion</td></tr> </table> </section> </body> </html> This is the JavaScript I run in console:(这是我在控制台中运行的JavaScript:) document.querySelectorAll(".allEnglishSections").forEach((element) => { element.cloneNode(deep); }); It fails in the sense that a deep cloning of both existing sections doesn't happen --- no extra two sections get added under the existing two ones.(从某种意义上说,这不会对两个现有部分进行深度克隆,这会失败---在现有两个部分下没有添加额外的两个部分。) Why does it fail?(为什么会失败?)   ask by ShadowyShade translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The elements are being cloned, but you aren't doing anything with the cloned nodes, so visually , nothing happens.(元素正在被克隆,但是您对克隆的节点不做任何事情,因此从视觉上看 ,什么也没有发生。)

.cloneNode returns the cloned node.(.cloneNode返回克隆的节点。) If you want to append it to the DOM, you have to do so explicitly - the interpreter isn't going to insert it anywhere automatically:(如果要将其附加到DOM,则必须明确地这样做-解释器不会自动将其插入任何地方:) document.querySelectorAll(".allEnglishSections").forEach((element) => { document.body.appendChild( element.cloneNode(true) ); }); <section class="allEnglishSections"> <h2>Conditioning</h2> <table> <tr> <th>English</tr> </th> <tr> <td>if</td> </tr> <tr> <td>else</td> </tr> </table> </section> <section class="allEnglishSections"> <h2>Querying</h2> <table> <tr> <th>English</tr> </th> <tr> <td>In plea</td> </tr> <tr> <td>In suggestion</td> </tr> </table> </section> (Also note that your current code requires deep to be a variable which has true assigned to it)((还请注意,您当前的代码要求deep必须是为其分配了true的变量)) For very similar reasons, the following code won't do anything by itself:(出于非常相似的原因,以下代码本身不会执行任何操作:) const div = document.createElement('div'); div.textContent = 'foo'; You'd have to insert the div somewhere for it to be made visible to the user.(您必须将div插入某个位置,以使其对用户可见。) undefined is shown in the console because the last expression evaluated gets printed to the console, but forEach returns undefined .(在控制台中显示undefined ,因为最后计算的表达式被打印到控制台,但是forEach返回undefined 。) It's not an error, just an indication that the final expression didn't hold a value.(这不是错误,只是表明最终表达式不包含值。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...