html中的替换元素是什么？

html：

<div id='divContainer'>

<div id='divBeReplaced'>被替换的元素</div>

</div>

1.使用DOM对象添加元素

var elemOld = document.getElementById('divBeReplaced')

var elemParent = elemOld.parentNode

var elemNew = document.createElement('div')

elemNew.innerHTML = '新的元素'

elemParent.replaceChild(elemNew, elemOld)

2.使用JQuery添加元素

$("#divBeReplaced").replaceWith("<b>Hello world!</b>")

我们知道html中元素对外表现都是一个个盒子或者说是框，那么这些盒子是否都一样呢？前面说过，这些盒子有的是从上到下竖着摆放的，而有的是横着摆放的。另外，有的盒子装的内容是直接展示的，有的却是魔术盒，根据标签和属性决定具体的展示内容。

替换元素是指，浏览器会根据元素的标签和属性，来决定元素的具体显示内容。 其内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）。

最明显的两个例子：

另外，textarea、select、object、video都是替换元素。这些元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

HTML 的大多数元素是非替换元素，浏览器直接将其内容显示出来。例如：div, p, span

普通流中，块元素独占一行。例如：div，p，h1等。

普通流中，行内元素左右可以有其他行内元素。

块级元素，width，height，margin，boder的设置遵循盒模型。

行内替换元素，width，height，margin，boder的设置遵循盒模型。另外，当其宽高有auto属性时，其表现如下：

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

替换元素和非替换元素

html元素两种分类。替换元素和不可替换元素；块级元素和行内元素

置换元素(替换元素)和非置换元素(不可替换元素)

行内元素与块级元素的总结

置换和非置换元素

可以的，但不规范。如果想让div跟span一样使用，要给div设置display：inline或者 display：inline-block属性。

div是块级元素，独占正行，可设置宽高、内外边距，而span元素是行内元素，在它的前后不会换行。

---