javascript - Using appendChild multiple times with the same node in JS - Stack Overflow

admin管理员组

文章数量:1182735

I'm writing a form validation script for a form with multiple ratings, and I'd like to insert a bit of text that says "give a rating!" for each rating the user misses. I wrote the code below to do this, but I'm running into a problem where the give_rating node is only appended to the last node on the form. I know that this is because appendChild basically moves a node instead of duplicating it, and I tried solving this using cloneNode but that just breaks my JS entirely.

Anyway, here's the code. What am I doing wrong?

Thanks for your help,

Chris

var give_rating = document.createElement('span');
give_rating.className='small red';
give_rating.innerHTML = '<strong> &nbsp;Give a rating!</strong>';

document.getElementById('rating1').appendChild(give_rating);
document.getElementById('rating2').appendChild(give_rating);

When I use the code above code give_rating is only appended to 'rating2'.

document.getElementById('rating1').appendChild(give_rating.cloneNode(True));
document.getElementById('rating2').appendChild(give_rating.cloneNode(True));

When I use this code the entire script fails. How do I add an instance of "Give a rating!" for each rating on my form that the user fails to fill out?

I'm writing a form validation script for a form with multiple ratings, and I'd like to insert a bit of text that says "give a rating!" for each rating the user misses. I wrote the code below to do this, but I'm running into a problem where the give_rating node is only appended to the last node on the form. I know that this is because appendChild basically moves a node instead of duplicating it, and I tried solving this using cloneNode but that just breaks my JS entirely.

Anyway, here's the code. What am I doing wrong?

Thanks for your help,

Chris

var give_rating = document.createElement('span');
give_rating.className='small red';
give_rating.innerHTML = '<strong> &nbsp;Give a rating!</strong>';

document.getElementById('rating1').appendChild(give_rating);
document.getElementById('rating2').appendChild(give_rating);

When I use the code above code give_rating is only appended to 'rating2'.

document.getElementById('rating1').appendChild(give_rating.cloneNode(True));
document.getElementById('rating2').appendChild(give_rating.cloneNode(True));

When I use this code the entire script fails. How do I add an instance of "Give a rating!" for each rating on my form that the user fails to fill out?

• javascript
• appendchild

Share Improve this question Follow asked Nov 19, 2010 at 4:52 ChrisChris 1,33355 gold badges1919 silver badges3333 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 16

JavaScript is case-sensitive: True should be true (lower case).

1. You can only insert the created html elements or document pieces once. So, you have to call the cloneNode() function.
2. The javascript is case-sensitive. So, it should be cloneNode(true), instead of cloneNode(True).
3. You can turn on the javascript debugger of the browser (both Chrome and IE/Edge) by pressing F12. Then you can see what happen to your script.

本文标签： javascriptUsing appendChild multiple times with the same node in JSStack Overflow