js向页面插入div

内容加单引号，去掉空格。concent='<div style="layout-grid:19px"><p style="text-align:centertext-autospace:noneline-height:37pxmargin:0pxpadding:0px"><span style="font-size:24pxfont-family:宋体_GB2312,华文宋体">四川省成都市</span></p><p style="text-align:centertext-autospace:noneline-height:37pxmargin:0pxpadding:0px"><span style="font-size:29pxfont-family:宋体_GB2312,华文宋体">书</span></p>等内容</div>'

1、利用js代码首先创建一个div，document.createElement('div')

2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。

3、确定位置之后，显示div即可。

示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。

<input type="text" id="city" value="beijing"/>

方法：

function createDiv(){

    //首先创建div

    var descDiv = document.createElement('div')

    document.body.appendChild(descDiv)

    //获取输入框dom元素

    var text = document.getElementById('city')

    //计算div的确切位置

    var seatX = text.offsetLeft + text.offsetWidth//横坐标

    var seatY = text.offsetTop + text.offsetHeight//纵坐标

    //给div设置样式，比如大小、位置

    var cssStr = "z-index:5width:420pxheight:300pxbackground-color:#FFFF99border:1px solid blackposition:absoluteleft:" 

    + seatX + 'pxtop:' + seatY + 'px'

    //将样式添加到div上，显示div

    descDiv.style.cssText = cssStr

    descDiv.innerHTML = '这是一个测试的div显示的内容'

    descDiv.id = 'descDiv'

    descDiv.style.display = 'block'

}

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<script>标签，输入js代码：

$('body').append('<div id="a" style="color:blue">div内容</div>')

3、浏览器运行index.html页面，此时div以及它的id属性和颜色属性一起被拼接到html中了。

---