DOM扩展------插入标记

/**
这些插入标签的方法还有个特点，可以将字符串解析成DOM树。
如果插入<p>test</p>，页面上会形成HTML标签。
*/

/**
innerHTML
1.读：读取指定对象中的内容。
2.写：如果指定对象无内容，就插入；如果有内容，就替换掉。
*/
element.innerHTML("Hello World!");

/**
outerHTML
1.读：读取包括指定对象在内和对象里面的所有内容。
2.写：包括指定对象及其内容在内的所有内容替换掉。
*/
element.outerHTML(<p>Hello World!</p>);

/**
insertAdjacentHTML，感觉像自定位置的插入标签，因为不会出现替换的效果（没有读只有写）。
1.insertAdjacentHTML(参数1,参数2);，参数1是插入的位置，参数2是要出入的字符串。
2.参数1的属性分为：beforebegin、afterbegin、beforeend、afterend。
3.写：在指定位置插入。
*/
//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

/**
innerText：插入文本
1.读和写都只有文本，没有html标签
*/
//读
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
/**
对于这个例子中的<div>元素而言，其innerText 属性会返回下列字符串：
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
*/

//写
div.innerText = "Hello world!";
/**
执行这行代码后，页面的HTML 代码就会变成如下所示。
<div id="content">Hello world!</div>
*/


/**
outerText，跟outerHTML很类似，但是性质跟innerText一样，都只针对文本。
*/
div.outerText = "Hello world!";
//这行代码实际上相当于如下两行代码：
var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text, div);