dom - JavaScript: can an input type=checkbox use appendChild in IE8 or not? - Stack Overflow

admin管理员组

文章数量:1022712

According to (v=VS.85).aspx and (v=VS.85).aspx , I should be able to do the following to create a new checkbox:

var answer = document.createElement('input');
answer.setAttribute('type', 'checkbox');
answer.setAttribute('id',   'answer');
answer.setAttribute('value', 'a');
answer.appendChild(document.createTextNode('test'));

This works in Firefox and Chrome, but in IE 8, the last function call produces the following error message:

Error: Unexpected call to method or property access.

I have tried bypassing this by using the innerText attribute instead, but this approach receives the same error message.

Am I doing something wrong? If so, what? If not, how can I circumvent what appears to be nonsense?

According to http://msdn.microsoft./en-us/library/ms535934(v=VS.85).aspx and http://msdn.microsoft./en-us/library/ms535262(v=VS.85).aspx , I should be able to do the following to create a new checkbox:

var answer = document.createElement('input');
answer.setAttribute('type', 'checkbox');
answer.setAttribute('id',   'answer');
answer.setAttribute('value', 'a');
answer.appendChild(document.createTextNode('test'));

This works in Firefox and Chrome, but in IE 8, the last function call produces the following error message:

Error: Unexpected call to method or property access.

I have tried bypassing this by using the innerText attribute instead, but this approach receives the same error message.

Am I doing something wrong? If so, what? If not, how can I circumvent what appears to be nonsense?

• javascript
• dom
• internet-explorer-8
• input
• appendchild

Share Improve this question Follow asked Feb 25, 2011 at 18:20 sadakatsusadakatsu 1,2732020 silver badges3636 bronze badges 2

• > This works in Firefox and Chrome O RLY? – Roatin Marth Commented Feb 25, 2011 at 18:26
• Ah. A little more digging showed that I read the HTML form examples a bit too quickly. The text for the inputs is not actually enclosed by the input tags. At least Firefox and Chrome didn't report errors on the function call... – sadakatsu Commented Feb 25, 2011 at 18:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I don't think you want to add a text node to your checkbox. Instead I would use a label object with two child nodes: the checkbox input and a text node:

var answer = document.createElement('input');
answer.setAttribute('type', 'checkbox');
answer.setAttribute('id',   'answer');
answer.setAttribute('value', 'a');
var answerLabel = document.createElement('label');
answerLabel.setAttribute('for','answer'); // this corresponds to the checkbox id
answerLabel.appendChild(answer);
answerLabel.appendChild(document.createTextNode(' test'));
document.body.appendChild(answerLabel);

You can use:

var label = document.createElement('label');
label.answer;
label.appendChild(document.createTextNode('test'));

According to (v=VS.85).aspx and (v=VS.85).aspx , I should be able to do the following to create a new checkbox:

var answer = document.createElement('input');
answer.setAttribute('type', 'checkbox');
answer.setAttribute('id',   'answer');
answer.setAttribute('value', 'a');
answer.appendChild(document.createTextNode('test'));

This works in Firefox and Chrome, but in IE 8, the last function call produces the following error message:

Error: Unexpected call to method or property access.

I have tried bypassing this by using the innerText attribute instead, but this approach receives the same error message.

Am I doing something wrong? If so, what? If not, how can I circumvent what appears to be nonsense?

According to http://msdn.microsoft./en-us/library/ms535934(v=VS.85).aspx and http://msdn.microsoft./en-us/library/ms535262(v=VS.85).aspx , I should be able to do the following to create a new checkbox:

var answer = document.createElement('input');
answer.setAttribute('type', 'checkbox');
answer.setAttribute('id',   'answer');
answer.setAttribute('value', 'a');
answer.appendChild(document.createTextNode('test'));

This works in Firefox and Chrome, but in IE 8, the last function call produces the following error message:

Error: Unexpected call to method or property access.

I have tried bypassing this by using the innerText attribute instead, but this approach receives the same error message.

Am I doing something wrong? If so, what? If not, how can I circumvent what appears to be nonsense?

• javascript
• dom
• internet-explorer-8
• input
• appendchild

Share Improve this question Follow asked Feb 25, 2011 at 18:20 sadakatsusadakatsu 1,2732020 silver badges3636 bronze badges 2

• > This works in Firefox and Chrome O RLY? – Roatin Marth Commented Feb 25, 2011 at 18:26
• Ah. A little more digging showed that I read the HTML form examples a bit too quickly. The text for the inputs is not actually enclosed by the input tags. At least Firefox and Chrome didn't report errors on the function call... – sadakatsu Commented Feb 25, 2011 at 18:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I don't think you want to add a text node to your checkbox. Instead I would use a label object with two child nodes: the checkbox input and a text node:

var answer = document.createElement('input');
answer.setAttribute('type', 'checkbox');
answer.setAttribute('id',   'answer');
answer.setAttribute('value', 'a');
var answerLabel = document.createElement('label');
answerLabel.setAttribute('for','answer'); // this corresponds to the checkbox id
answerLabel.appendChild(answer);
answerLabel.appendChild(document.createTextNode(' test'));
document.body.appendChild(answerLabel);

You can use:

var label = document.createElement('label');
label.answer;
label.appendChild(document.createTextNode('test'));

本文标签： domJavaScript can an input typecheckbox use appendChild in IE8 or notStack Overflow