js来编写页面

最新推荐文章于 2023-11-22 22:22:04 发布

编程之上

最新推荐文章于 2023-11-22 22:22:04 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/ruizhengyun/article/details/40723307

javascript 专栏收录该内容

47 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript来编写和组织HTML页面，展示了从基础HTML结构到使用JS改进页面逻辑的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，用我们最简单的法子写个html页面：

var oDiv = document.createElement('div');
oDiv.id = 'box';
oDiv.alt = 'This is a div';
oDiv.style.color ='red';
oDiv.style.width ='1000px';
oDiv.style.margin ='0 auto';
oDiv.innerHTML = 'This is a div';
document.body.appendChild(oDiv);

毫无疑问，这是一个很简单的页面，接下来是用方法来改写上面的语句：

var oDiv = createEle();
attr(oDiv,{
	 id    : 'box'
	,title : 'This is a div'
	,color : 'red'
	,width : '1000px'
	,margin: '0 auto'
});

oDiv.innerHTML = 'This is a div';
append(document.body,oDiv);

// function
function createEle(tag){
	return document.createElement(tag || 'div');
}
function append(oParent,obj){
	oParent.appendChild(obj);
}
function attr(obj,json){
	for(var i in json){
		if(
			   i == 'title'
			|| i == 'id'
			|| i == 'src'
			|| i == 'alt')
		{
			obj[i] = json[i];
		}else{
			obj.style[i] = json[i];
		}
	}
}

可以根据逻辑关系，再更改下：

var oDiv = createEle(document.body
	,{
		 id    : 'box'
		,title : 'This is a div'
		,color : 'red'
		,width : '1000px'
		,margin: '0 auto'
	}
);
oDiv.innerHTML = 'This is a div';

// function
function createEle(oParent,json,tag){
	var obj = document.createElement(tag || 'div');
	if(oParent){
		append(oParent,obj);
	}
	if(json){
		attr(obj,json);
	}
	return obj;
}
function append(oParent,obj){
	oParent.appendChild(obj);
}
function attr(obj,json){
	for(var i in json){
		if(
			   i == 'title'
			|| i == 'id'
			|| i == 'src'
			|| i == 'alt')
		{
			obj[i] = json[i];
		}else{
			obj.style[i] = json[i];
		}
	}
}