난 태그를 자바스크립트로 동적 생성할때는 아래처럼 쓰는 버릇이 있었다.
MooTools(이하 무툴)를 쓰게 된 이후로는 아래처럼 됐다.
이렇게 잘 쓰고 있는데 이상하게 ie6에서만 name이 지정 안되길래 무툴의 소스를 봤더니,
이 소스를 보면 name속성 코드가 ie6을 위해 따로 제작되어있다.
하지만 ie6용 코드에서는 자기자신을 바꾸지 않는다. 부모노드를 가진 객체일경우만 새로 생성해서 바꿔준다.
그러나 위에 내가 짠 코드는 속성을 설정한 후에 부모에 붙이기때문에 ie에서 작동하지 않았다..
저 오류를 발견한건 이미 저런 코딩이 몇개 더 있는 상황이라 무툴의 소스를 살짝 고쳐봤다.
이렇게 바꿔서 잘 되기는 하는데 뭔가 문제가 생길지도..
그런데 이문제는 내 코딩습관이 잘못된건가.. 아님 무툴에서 구현을 잘못한건가...
나도 잘 모르겠다.
...
var input = document.createElement('input');
input.name = 'id';
input.type = 'text';
form.appendChild(input);
...
var input = document.createElement('input');
input.name = 'id';
input.type = 'text';
form.appendChild(input);
...
MooTools(이하 무툴)를 쓰게 된 이후로는 아래처럼 됐다.
...
var input = new Element('input');
input.setProperties({name: 'id', type: 'text'});
form.adopt(input);
...
var input = new Element('input');
input.setProperties({name: 'id', type: 'text'});
form.adopt(input);
...
이렇게 잘 쓰고 있는데 이상하게 ie6에서만 name이 지정 안되길래 무툴의 소스를 봤더니,
...
setProperties: function(source){
for (var property in source) this.setProperty(property, source[property]);
return this;
}
setProperty: function(property, value){
switch (property){
case 'class': this.className = value; break;
case 'style': this.setStyles(value); break;
case 'name': if (window.ie6){
var el = $(document.createElement('<'+this.getTag()+' name="'+value+'" />'));
$each(this.attributes, function(attribute){
if (attribute.name != 'name') el.setProperty(attribute.name, attribute.value);
});
if (this.parentNode) this.replaceWith(el);
return el;
}
default: this.setAttribute(property, value);
}
return this;
}
...
setProperties: function(source){
for (var property in source) this.setProperty(property, source[property]);
return this;
}
setProperty: function(property, value){
switch (property){
case 'class': this.className = value; break;
case 'style': this.setStyles(value); break;
case 'name': if (window.ie6){
var el = $(document.createElement('<'+this.getTag()+' name="'+value+'" />'));
$each(this.attributes, function(attribute){
if (attribute.name != 'name') el.setProperty(attribute.name, attribute.value);
});
if (this.parentNode) this.replaceWith(el);
return el;
}
default: this.setAttribute(property, value);
}
return this;
}
...
이 소스를 보면 name속성 코드가 ie6을 위해 따로 제작되어있다.
하지만 ie6용 코드에서는 자기자신을 바꾸지 않는다. 부모노드를 가진 객체일경우만 새로 생성해서 바꿔준다.
그러나 위에 내가 짠 코드는 속성을 설정한 후에 부모에 붙이기때문에 ie에서 작동하지 않았다..
저 오류를 발견한건 이미 저런 코딩이 몇개 더 있는 상황이라 무툴의 소스를 살짝 고쳐봤다.
setProperty: function(property, value){
switch (property){
case 'class': this.className = value; break;
case 'style': this.setStyles(value); break;
case 'name': if (window.ie6){
if (this.parentNode){
var el = $(document.createElement('<'+this.getTag()+' name="'+value+'" />'));
$each(this.attributes, function(attribute){
if (attribute.name != 'name') el.setProperty(attribute.name, attribute.value);
});
this.replaceWith(el);
return el;
}else{
this.name = value;
break;
}
}
default: this.setAttribute(property, value);
}
return this;
}
...
switch (property){
case 'class': this.className = value; break;
case 'style': this.setStyles(value); break;
case 'name': if (window.ie6){
if (this.parentNode){
var el = $(document.createElement('<'+this.getTag()+' name="'+value+'" />'));
$each(this.attributes, function(attribute){
if (attribute.name != 'name') el.setProperty(attribute.name, attribute.value);
});
this.replaceWith(el);
return el;
}else{
this.name = value;
break;
}
}
default: this.setAttribute(property, value);
}
return this;
}
...
이렇게 바꿔서 잘 되기는 하는데 뭔가 문제가 생길지도..
그런데 이문제는 내 코딩습관이 잘못된건가.. 아님 무툴에서 구현을 잘못한건가...
나도 잘 모르겠다.
