js如何在指定位置添加div？

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

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

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

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

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

详细的解题步骤如下：

<div id="parent"></div>

function addElementDiv(obj) {

var parent = document.getElementById(obj)

//添加 div

var div = document.createElement("div")

//设置 div 属性，如 id

div.setAttribute("id", "newDiv")

div.innerHTML = "js 动态添加div"

parent.appendChild(div)

}

调用：addElementDiv("parent")

什么是DIV元素：

1、DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为"DIV block"，或"DIV element"或"CSS-layer"，或干脆叫"layer"。而中文我们把它称作"层次"。

2、DIV元素，是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。

1.背景介绍

.什么是DOM DOM 是 Document Object Model（文档对象模型）的缩写。 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。

2.知识剖析

1.什么是DOM节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点。 http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_nodename

2.常见的DOM属性 属性是节点（HTML 元素）的值，您能够获取或设置。 innerHTML http://www.w3school.com.cn/tiy/t.asp?f=hdom_tablerow_innerhtml 属性 nodeName 属性 nodeName 属性规定节点的名称 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document

nodeValue 属性 nodeValue 属性规定节点的值。 元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValue 是文本本身 属性节点的 nodeValue 是属性值

三、常见问题

常见的DOM *** 作有哪些？

4.解决方案

1.访问元素的方法 通过使用 getElementById() 方法 通过使用 getElementsByTagName() 方法 通过使用 getElementsByClassName() 方法

2.修改元素的方法 改变 HTML 内容 document.getElementById("p1").innerHTML="New text!"改变 CSS 样式 document.getElementById("p2").style.color="blue"改html和css

追加子元素的方法 首先必须创建该元素（元素节点），然后把它追加到已有的元素上。var para=document.createElement("p")创建新的 HTML 元素 - appendChild() 在父元素的最后追加 创建新的 HTML 元素-element.insertBefore(para,child)在指定位置给父级追加子元素 删除 HTML 元素，您必须清楚该元素的父元素：parent.removeChild(child)替换 HTML 元素:parent.replaceChild(para,child)方法

5.编码实战

6.更多讨论

onclick 事件——当用户点击时

onload 事件——用户进入

onunload 事件——用户离开

onmouseover事件——鼠标移入

onmouseout事件——鼠标移出

onmousedown事件——鼠标按下

onmouseup 事件——鼠标抬起

7.参考文献

http://www.runoob.com/jsref/dom-obj-document.html

课后提问环节：

1.onmouseover和onmousemove的区别？婷婷

onmouseover是在鼠标放到上面的时候就触发一次函数，onmousemove是在目标上面每移动一点都会触发一次函数。

2.什么是attribute？杨梦桐

attribute是元素的属性，

比如这个

它的a.getAttribute("target")=_blank

3.获取id和class的区别？李仁

document.getElementById("p1")

返回的是一个唯一的值，可以对id为p1的元素直接进行修改；

document.getElementsByClassName("p2")

返回的是一串数组，数组包含了所有className为p2的元素，想要对其中一项进行修改，必须加上[数字]，比如下面

sbox[i].style.backgroundColor="#ffa500"

4.怎么获取节点名称？张雪飞

http://www.w3school.com.cn/tiy/t.asp?f=jsref_node_nodename

5.onmouseover和hover有什莫区别？伊文秋

onmouseover可以实现hover的一切效果，并且因为他是执行一个函数，可以写出很多hover做不到的东西，例如onmouseover以后添加一个div盒子之类的。

6.为什么提取dom节点需要写document？韩筠宜

document是文档本身，一切的节点提取都是在提取document的内容。

7.用jquery写?王振

可以看这个里面的jquery写法。http://www.jquerycn.cn/a_4561

鸣谢

感谢大家观看

BY : 陈尚欢 | 韩阳| 杨纲

ppt链接：https://ptteng.github.io/PPT/PPT/js-02-DOM-manipulation.html#/

视频链接：https://v.qq.com/x/page/r0527rq9x36.html

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！

猛戳这里

---