DOM鎵╁睍-鎻掑叆鏍囪

/**
杩欎簺鎻掑叆鏍囩鐨勬柟娉曡繕鏈変釜鐗圭偣锛屽彲浠ュ皢瀛楃涓茶В鏋愭垚DOM鏍戙€?
濡傛灉鎻掑叆<p>test</p>锛岄〉闈笂浼氬舰鎴怘TML鏍囩銆?
*/

/**
innerHTML
1.璇伙細璇诲彇鎸囧畾瀵硅薄涓殑鍐呭銆?
2.鍐欙細濡傛灉鎸囧畾瀵硅薄鏃犲唴瀹癸紝灏辨彃鍏ワ紱濡傛灉鏈夊唴瀹癸紝灏辨浛鎹㈡帀銆?
*/
element.innerHTML("Hello World!");

/**
outerHTML
1.璇伙細璇诲彇鍖呮嫭鎸囧畾瀵硅薄鍦ㄥ唴鍜屽璞￠噷闈㈢殑鎵€鏈夊唴瀹广€?
2.鍐欙細鍖呮嫭鎸囧畾瀵硅薄鍙婂叾鍐呭鍦ㄥ唴鐨勬墍鏈夊唴瀹规浛鎹㈡帀銆?
*/
element.outerHTML(<p>Hello World!</p>);

/**
insertAdjacentHTML锛屾劅瑙夊儚鑷畾浣嶇疆鐨勬彃鍏ユ爣绛撅紝鍥犱负涓嶄細鍑虹幇鏇挎崲鐨勬晥鏋滐紙娌℃湁璇诲彧鏈夊啓锛夈€?
1.insertAdjacentHTML(鍙傛暟1,鍙傛暟2);锛屽弬鏁?鏄彃鍏ョ殑浣嶇疆锛屽弬鏁?鏄鍑哄叆鐨勫瓧绗︿覆銆?
2.鍙傛暟1鐨勫睘鎬у垎涓猴細beforebegin銆乤fterbegin銆乥eforeend銆乤fterend銆?
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.璇诲拰鍐欓兘鍙湁鏂囨湰锛屾病鏈塰tml鏍囩
*/
//璇?
<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!";
/**
鎵ц杩欒浠ｇ爜鍚庯紝椤甸潰鐨凥TML 浠ｇ爜灏变細鍙樻垚濡備笅鎵€绀恒€?
<div id="content">Hello world!</div>
*/


/**
outerText锛岃窡outerHTML寰堢被浼硷紝浣嗘槸鎬ц川璺焛nnerText涓€鏍凤紝閮藉彧閽堝鏂囨湰銆?
*/
div.outerText = "Hello world!";
//杩欒浠ｇ爜瀹為檯涓婄浉褰撲簬濡備笅涓よ浠ｇ爜锛?
var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text, div);

聽