js 动态创建div并向其中添加元素

来源：互联网发布：linux lsof 编辑：程序博客网时间：2024/05/16 15:39

CSS样式文件search_history.css

div{    width:95%;    height:40px;    line-height:36px;/**设置行高和控件高一样，这是内部文字才能垂直居中*/    overflow:hidden;/**为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了*/    margin: 0 auto;/**让div在页面中居中显示*/    background-color:#ffffff;/**背景颜色*/    border:solid 1px #f5f5f5;    border-width:1px 0px 0px 1px;}p{    margin-left:2.5%;}

HTML页面search_history.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head>    <meta http-equiv="content-type" content="search_history.html; charset=utf-8">    <title>历史记录html</title>    //引入css样式    <link type="test/css" rel="stylesheet" href="search_history.css"/></head><body id ="test" bgcolor="#f5f5f5"><p>历史搜索</p><script type="text/javascript">    var Shu =7;    var df = document.createDocumentFragment();    for (var i=0;i<= Shu;i++){    var oDiv = document.createElement("div");    var img = document.createElement("img");    img.src = 'ic_search_history_clock.png';    img.style.verticalAlign="middle";//设置图片垂直居中显示    img.style.padding="5px";    oDiv.appendChild(img);    var text = document.createElement("span");    text.innerHTML = "方向盘套";    text.style.padding="5px";    oDiv.appendChild(text);    var img2 = document.createElement("img");    img2.src = 'ic_search_history_next.png';    img2.style.verticalAlign="middle";//设置图片垂直居中显示    img2.style.padding="5px";    oDiv.appendChild(img2);    df.appendChild(oDiv);    }    document.body.appendChild(df); </script></body></html>

阅读全文

0 0