JS form元素的获取&动态添加元素

form元素的获取

<form action="">
    <span>用户名</span><input type="text" name="username">
    <b>密码</b><input type="radio" name="sex">
    <input type="checkbox" name="hobby[]">
    <select name="city" id=""></select>
    <textarea name="intro" id="" cols="30" rows="10"></textarea>
    <input type="submit">
</form>
<script type="text/javascript">
    //特殊的属性elements 属于form标签元素
    var form = document.forms[0];
    //elements
    fs = form.elements;//这个属性只包括了 form元素
    //修改背景
    fs[0].style.background = 'red';

    //name属性来获取
    var text = form.intro;
    text.style.background = 'black';
</script>

JS 动态添加元素

// 创建body标签
var body = ce('body');
document.documentElement.appendChild(body);

//设置字符集
var meta = ce('meta');
meta.setAttribute('charset','utf-8');

document.head.appendChild(meta);

//创建content元素
var content = ce('div');
//设置属性
content.setAttribute('id','content');

var logo = ce('div');
logo.setAttribute('id','logo');


//C创建img标签
var img = ce('img');
img.src = './images/google_logo.png';
img.setAttribute('width','100%');

//创建hr标签
var hr = ce('hr');

logo.appendChild(img);
content.appendChild(logo);
content.appendChild(hr);
//将dadiv插入到body中
document.body.appendChild(content);

// <link rel="stylesheet" href="3.css">
var link = ce('link');
link.href = '3.css';
link.setAttribute('rel','stylesheet');
document.head.appendChild(link);

//修改标题
document.title = '动态使用js来构建页面';

function ce(tagName) {
    return document.createElement(tagName);
}
</script>
<!--3.css--!>
*{
    margin:0px;
    padding:0px;
}
#content{
    width:100%;height:2000px;
}
#logo{
    width:200px;
    height:80px;
}