Using HTML attributes in javascript

Question

I am a beginner in javascript. I'm trying to add a function to generate new form elements using javascript, on a page that's generated in php.

The code works in creating new <tr>, <td>, <input type="text"> html elements. However when I try to create buttons using css styles, I find that the styles are lost from the tags.

if(document.createElement) 
var tr = document.createElement("tr");
var input = document.createElement("input");
// If NS is passed, should become NS[2] etc
input.id = field+"["+count+"]";
input.name = field+"["+count+"]";
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.

var td=document.createElement("td");
var newContent = document.createTextNode("NS");
td.appendChild(newContent);

tr.appendChild(td);     
td=document.createElement("td");        
td.appendChild(input);
tr.appendChild(td);                 

var btnDel=document.createElement("a");
btnDel.class="btn btn-primary";
btnDel.onclick = "addField(\'nameservers\',\'NS\',10);" ;


var btnText=document.createElement("span");
btnText.class="btn-label";
btnText.innerHTML="Add";


btnDel.appendChild(btnText);        
td.appendChild(btnDel);
tr.appendChild(td);         
field_area.appendChild(tr);

}

The produced code shows:

<a><span>Add</span>
</a>
</td>

instead of what I expect:

<a onclick="addField('nameservers','NS',10);" class="btn btn-primary">
<span class="btn-label">Add     
</span>
</a>

What am I doing wrong? What's the proper way of passing all html attributes using the script?

christopher · Accepted Answer · 2013-07-22 11:58:08Z

2

For the on click

Instead of trying to output this into the HTML, why not do this in pure Javascript, using the addEventListener method?

element.addEventListener('click', function() {

    addField('nameservers','NS',10);

    }, false);

This approach is known as non-obtrusive Javascript, and it's actually quite a desirable attribute when developing a website.

For the class

As mentioned, use className and not class.

class usually precedes the declaration of as new class, and can't be used like an attribute, in the same way that you can't call a variable var.

answered Jul 22, 2013 at 11:58

christopher

27.4k6 gold badges58 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joel G Mathew Over a year ago

About the first part of your explanation, is it just a best practise, or is using element.onclick actually wrong?

christopher Over a year ago

It's just best practise. It's not "WRONG". But in the future, when you want to work on just the javascript, you'll appreciate not having to go between your JS files and your HTML files because you've got all your JS references in one place.

Ivan Chernykh · Accepted Answer · 2013-07-22 11:55:22Z

2

Use className= instead of class=. So it will be like:

btnDel.className="btn btn-primary";

It is because the class word is reserved word in JavaScript.

answered Jul 22, 2013 at 11:55

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

Collectives™ on Stack Overflow

Using HTML attributes in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related