jsÖÐinnerhtmlµÄÓ÷¨
innerhtml ÊôÐÔÔÚ javascript ÖÐÓÃÓÚ»ñÈ¡»òÉèÖà html ÔªËؼ°Æä×ÓŮԪËØµÄ html ±ê¼Ç£¬¿ÉÒÔ¶¯Ì¬¸üÐÂÄÚÈÝ¡¢¼ÓÔØÍⲿÄÚÈÝ¡¢½¨ÉèºÍ²åÈëÐÂÔªËØ¡£Ê¹ÓÃʱÐèҪעÖØÇ徲Σº¦¡¢ÐÔÄÜÓ°ÏìºÍä¯ÀÀÆ÷¼æÈÝÐÔ¡£
innerHTML ÔÚ JavaScript ÖеÄÓ÷¨
innerHTML ÊôÐÔÊÇ JavaScript ÖÐÒ»¸öÇ¿Ê¢µÄ¹¤¾ß£¬ÔÊÐí¿ª·¢ÕßÐÞ¸Ä HTML ÔªËصÄÄÚÈÝ¡£¸ÃÊôÐÔ·µ»Ø»òÉèÖÃÖ¸¶¨ÔªËؼ°ÆäËùÓÐ×ÓŮԪËØµÄ HTML ±ê¼Ç¡£
Ó÷¨
ÉèÖÃÒ»¸öÔªËØµÄ innerHTML ºÜÊǼòÆÓ£º
Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
element.innerHTML = "ÐÂÄÚÈÝ";
µÇ¼ºó¸´ÖÆ
Õâ»á½« element ÔªËصÄËùÓÐÄÚÈÝÌ滻Ϊ “ÐÂÄÚÈÝ”¡£
»ñÈ¡ÔªËØµÄ innerHTML
Ò²¿ÉÒÔʹÓà innerHTML ÊôÐÔ»ñÈ¡ÔªËØµÄ HTML ÄÚÈÝ£º
const content = element.innerHTML;
µÇ¼ºó¸´ÖÆ
ÓÃÀý
innerHTML ÔÚÖÖÖÖ³¡¾°ÖкÜÊÇÓÐÓãº
¶¯Ì¬¸üÐÂÄÚÈÝ£º¿ÉÒÔ¶¯Ì¬¸ü¸Ä HTML ÔªËصÄÄÚÈÝ£¬¶øÎÞÐèÊÖ¶¯¹¹½¨±ê¼Ç¡£
¼ÓÔØÍⲿÄÚÈÝ£ºÍ¨¹ý Ajax »òÆäËûÒì²½ÊÖÒÕ¼ÓÔØÍⲿ HTML ÄÚÈÝ¡£
½¨ÉèºÍ²åÈëÐÂÔªËØ£ºÊ¹Óà innerHTML ¿ÉÒÔ½¨ÉèºÍ²åÈëÐÂÔªËضø²»Ö±½ÓÐÞ¸Ä DOM ½á¹¹¡£
×¢ÖØÊÂÏî
ÔÚʹÓà innerHTML ʱ£¬ÐèҪעÖØÒÔÏÂÊÂÏ
Ç徲Σº¦£ºÎ´¾Êʵ±Ïû¶¾µÄÊäÈë¿ÉÄܻᵼÖ¿çÕ¾µã¾ç±¾ (XSS) ¹¥»÷¡£À´×Ô²»¿ÉÐÅȪԴµÄ HTML ÄÚÈÝӦʼÖÕ¾ÙÐÐÏû¶¾¡£
ÐÔÄÜÓ°Ï죺´ó×ÚÐÞ¸Ä innerHTML ¿ÉÄÜ»áÓ°ÏìÒ³ÃæÐÔÄÜ¡£
ä¯ÀÀÆ÷¼æÈÝÐÔ£ºinnerHTML ÔÚһЩ¾Éä¯ÀÀÆ÷ÖпÉÄܱ£´æ¼æÈÝÐÔÎÊÌâ¡£
ʾÀý
ÒÔÏÂÊÇÒ»¸öʹÓà innerHTML ¶¯Ì¬¸üÐÂÔªËØÄÚÈݵÄʾÀý£º
const button = document.querySelector("button"); button.addEventListener("click", () => { const paragraph = document.querySelector("p"); paragraph.innerHTML = "ÄÚÈÝÒѸüУ¡"; });
µÇ¼ºó¸´ÖÆ
ÒÔÉϾÍÊÇjsÖÐinnerhtmlµÄÓ÷¨µÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡