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

妖狐艹你老母 2022-06-08 09:50 274阅读 0赞

**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 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS如何向div中插入元素

第一步：首先我们写一个简单的页面，页面有一个div盒子，盒子里放置了一个li元素。 ①页面效果 ![在这里插入图片描述][watermark_type_ZmFuZ3p

￡神魔★判官ぃ/ 2022年11月29日 12:49/ 0 赞/ 327 阅读

相关 js jquery 添加元素div

例子1 function listScanSuccessBlue(data) { var plItem = $('<di

曾经终败给现在/ 2022年09月11日 07:17/ 0 赞/ 234 阅读

相关 js向object对象添加属性和向数组中追加元素

js向object对象添加属性和向数组中追加元素 json对象添加属性 json数组添加元素对象内部数组中追加元素 json

落日映苍穹つ/ 2022年09月10日 07:27/ 0 赞/ 497 阅读

相关给div动态添加样式

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

旧城等待，/ 2022年08月27日 11:57/ 0 赞/ 258 阅读

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

CSS样式文件search\_history.css div{ width:95%; height:40px; lin

妖狐艹你老母/ 2022年06月08日 09:50/ 0 赞/ 275 阅读

相关运用jQuery动态向html中添加表格元素

实现的功能是运用jQuery动态的向一个table中添加行元素，很简单，也不废话，直接上代码。 <!DOCTYPE html> <html lang="en"

快来打我*/ 2022年06月02日 20:35/ 0 赞/ 197 阅读

相关 JS向数组添加元素，插入数据

js中对于数组的操作很常见，下面记录一下js向数组添加元素的方法。 let myArray=[11,22,33]; console.log('原数组：

柔情只为你懂/ 2022年05月19日 07:09/ 0 赞/ 356 阅读

相关 JS实现动态添加和删除div（基于bootstrap）

背景需要做一个页面，页面表单可以输入参数，点击确认按钮可以发请求给某个接口。但是接口的某个字段是数组类型，所以在页面上需要实现添加或者删除元素的功能。实现

Myth丶恋晨/ 2022年05月15日 13:57/ 0 赞/ 509 阅读

相关 JS-向数组指定位置添加元素

向数组指定位置添加元素： <!DOCTYPE html> <html> <head> <meta chars

ゞ浴缸里的玫瑰/ 2022年05月13日 01:52/ 0 赞/ 238 阅读

相关 JS动态向表格添加数据

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t

灰太狼/ 2022年04月15日 05:16/ 0 赞/ 489 阅读