> 웹 프론트엔드 > JS 튜토리얼 > Node.js는 CreateElement를 사용하여 태그를 동적으로 생성합니다. example_javascript 기술

Node.js는 CreateElement를 사용하여 태그를 동적으로 생성합니다. example_javascript 기술

WBOY
풀어 주다: 2016-05-16 17:13:41
원래의
1179명이 탐색했습니다.

//라벨 생성 방법 정의
//*************************************//

코드 복사 코드는 다음과 같습니다.

var createLabel = function(id, name, value) {
var label_var = document.createElement("label")

var label_id = document. createAttribute(" id");
label_id.nodeValue = id;

var label_text = document.createTextNode(value)

label_var.setAttributeNode(label_id); = document.createAttribute("class");
label_css.nodeValue = "select_css";
label_var.setAttributeNode(label_css)
label_var.appendChild(label_text);
}


//*************************************//
//입력 태그를 생성하는 방법 정의(주로 텍스트)
//id, 이름, 값, 유형 각각 생성된 태그의 id를 나타냅니다.
// 이름(name), 값(value), 유형(type)
// 입력 방식 이벤트를 바인딩합니다. 바인딩 방법은 다음과 같습니다. (여러 개의 이벤트 메서드를 바인딩할 수 있음) 동시에):
// "onchange==alert('이 값은 변경 성공입니다!');|onblur==alert('이 값은 아름답습니다 !');" 🎝>***/ /




코드 복사
코드는 다음과 같습니다. var createInput = 함수(id, 이름, 값, 유형, 너비, 높이, 이벤트) { var var_input = null
var input_event_attr_IE = ""
if (event != null && event != "" ) {
var event_array_IE = event .toString().split('|');
for (var i = 0; i < event_array_IE.length; i ) {
var event_IE = event_array_IE ].split('==') ;
input_event_attr_IE = " " event_IE[0] "='' ";
}
}
IE6과의 호환성을 위해 변수를 정의해 보세요. 0 및 IE7.0.
var_input = document.createElement("")
} catch (e) {
var_input = document.createElement("input")

var input_id = document.createAttribute("id");
input_id.nodeValue = id;
var input_name = document.createAttribute("name")
input_name.nodeValue = 이름; 🎜>var input_type = document.createAttribute("type");
input_type.nodeValue = type;
var input_value = document.createAttribute("value");
input_value.nodeValue = value; var input_style = document.createAttribute("style");
var input_style_str = "";

if (width != null && width != "") {
input_style_str = "width:" width "px;";
} else {
input_style_str = "width:30px;"
}
if (height != null && height != "") {
input_style_str = "높이:" 높이 "px;";
}

if (event != null && event != "") {
var event_array = event.toString().split('| ');
for (var i = 0; i < event_array.length; i ) {
var events = event_array[i].split('==')
var input_event = document. createAttribute(events[0]);
input_event.nodeValue = events[1];
var_input.setAttributeNode(input_event)
}
}

var_input.setAttributeNode(input_type) ;
input_style.nodeValue = input_style_str;
try {
var_input.setAttributeNode(input_style);
} catch (e) {
width = (width == null || width == " ") ? "30" : 너비;
var_input.setAttribute("width", width);
if (height != null && height != "") {
var_input.setAttribute("height" , height);
}
}
// if (readonly != "") {
// var input_readonly = document.createAttribute("readonly")// input_readonly. nodeValue = "readonly";
// var_input.setAttributeNode(input_readonly);
// }

var_input.setAttributeNode(input_id)
var_input.setAttributeNode(input_name); var_input.setAttributeNode(input_value);

return var_input;
}


//************************************************** ****************//
//선택 선택 상자에 대한 레이블을 생성하는 방법을 정의합니다.
//***** id는 식별 ID를 나타냅니다. 라벨의
//***** 이름은 라벨의 이름을 나타냅니다.
//***** 옵션은 라벨에 바인딩될 옵션을 나타냅니다(예: "0231A563-Professional Services| 02312177-유지 관리 서비스 |...")
//***** 분할 문자열은 옵션을 구분하는 데 사용되는 문자를 나타냅니다(예: '|').
//***** 분할 문자는 구분 기호를 나타냅니다. 키-값 쌍을 구분하는 것(예: '-')
//***** 이벤트는 이 태그에 해당하는 이벤트를 나타냅니다(event==null인 경우 이 태그는 이벤트를 바인딩하지 않습니다)
/ /************************************************** ****************** ***************************//




코드 복사


코드는 다음과 같습니다.

var createSelect = function(id, name, options, Splitstr, Splitchar, event, selectedValue) {
var var_select = null;
IE6.0과 IE7.0의 {//处理IE6.0 및 IE7.0을 시도해 보세요.
var_select = document.createElement("