{"id":85094,"date":"2023-12-15T14:12:54","date_gmt":"2023-12-15T14:12:54","guid":{"rendered":"https:\/\/abbyhsia.com\/?p=85094"},"modified":"2025-04-15T11:14:46","modified_gmt":"2025-04-15T11:14:46","slug":"noteinnerhtml-and-createelement-methods-for-dom-element-manipulation","status":"publish","type":"post","link":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/","title":{"rendered":"[Note]’innerHTML’ and ‘createElement’ Methods for DOM Element Manipulation.-JavaScript"},"content":{"rendered":"\n

Cover Credits to Oleg Frolov<\/a><\/p>\n\n\n\n

What is DOM in JavaScript?<\/h2>\n\n\n\n

Document Object Model(DOM)\u6587\u6a94\u6a21\u578b\uff0c \u7c21\u55ae\u4f86\u8aaa\u5c31\u662fHTML\u7bc0\u9ede\uff0c\u5305\u542b\u4e86\u7236\u5b50\u53ca\u5144\u5f1f\u4e4b\u9593\u5c64\u7d1a\u5143\u7d20\u95dc\u4fc2\uff0c\u53ef\u4ee5\u900f\u904e\u9644\u52a0\u7a0b\u5f0f\u78bc\u53bb\u5275\u5efa\u3001\u4fee\u6539\u3001\u522a\u9664\u7bc0\u9ede\u6216\u9032\u884c\u4e8b\u4ef6\u8655\u7406\u3002<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

DOM\u80fd\u505a\u5230\u4ec0\u9ebc\uff1f<\/h2>\n\n\n\n

\u5982\u4e0a\u6bb5\u5716\u793a\u6240\u898bDOM\u7522\u751f\u6a39\u72c0\u7d50\u69cb\uff0cJS\u53ef\u4ee5\u900f\u904eDOM\u53bb\u64cd\u63a7\u7bc0\u9ede\uff0c\u63a7\u5236CSS\uff0c\u589e\u52a0\u4e92\u52d5\u6548\u679c\u3002<\/p>\n\n\n\n

\u4ee5\u4e0b\u5148\u4ee5\u76ee\u524d\u5b78\u7fd2\u5230\u300c\u7372\u53d6\u3001\u589e\u52a0\u7bc0\u9ede\u300dJS\u8a9e\u6cd5\u7b46\u8a18\u3002<\/p>\n\n\n\n

JavaScript<\/span><\/span><\/path><\/path><\/svg><\/span>
\/\/get elements form dom<\/span><\/span>\ndocument<\/span>.<\/span>getElmentbyId<\/span>()<\/span>;<\/span>\/\/\u552f\u4e00\u5143\u4ef6<\/span><\/span>\ndocument<\/span>.<\/span>querySelector<\/span>()<\/span>;<\/span>\/\/\u55ae\u500b\u5143\u4ef6<\/span><\/span>\ndocument<\/span>.<\/span>querySelectorAll<\/span>()<\/span>;<\/span>\/\/\u904d\u6b77\u8907\u6578\u540c\u5c64\u5143\u7d20<\/span><\/span>\n<\/span>\n\/\/add elements<\/span><\/span>\ndocument<\/span>.<\/span>createElment<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\/\/\u5275\u5efa\u5143\u7d20<\/span><\/span>\nel<\/span>.<\/span>textcontext<\/span>=<\/span>''<\/span>\/\/\u589e\u52a0\u6587\u5b57<\/span><\/span>\nel<\/span>.<\/span>appendChild<\/span>(<\/span>''<\/span>)<\/span>;<\/span>\/\/\u5c07\u5efa\u7acb\u7684\u5143\u7d20\u653e\u5728\u5c0d\u61c9\u7bc0\u9ede\u4e4b\u4e0b<\/span><\/span>\n<\/span>\nel<\/span>.<\/span>innerHTML<\/span>=<\/span>'<\/span><p><\/span>'<\/span>+<\/span>'<\/span>HI<\/span>'<\/span>+<\/span>'<\/span><\/p><\/span>'<\/span>;<\/span>\/\/\u5c07\u5143\u7d20\u653e\u5230DOM<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\u5982\u4f55\u53d6\u5f97\u7bc0\u9ede(Node)<\/h2>\n\n\n\n
document.getElmentbyID<\/strong><\/h3>\n\n\n\n
Html\u4f7f\u7528\u5177\u6709\u552f\u4e00\u6027\u8cea\u6a19\u7c64\u201did\u201d\u547d\u540d\u5143\u7d20\uff0c\u5728JS\u8fd4\u56de\u4e00\u500b\u5143\u7d20\u3002<\/p>\n\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<<\/span>h1<\/span> <\/span>id<\/span>=<\/span>"title"<\/span>><\/<\/span>h1<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
JavaScript<\/span><\/span><\/path><\/path><\/svg><\/span>
const<\/span> el <\/span>=<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>title<\/span>'<\/span>)<\/span>;<\/span><\/span>\nconsole<\/span>.<\/span>log<\/span>(el)<\/span>;<\/span><\/span>\n\/\/Output\uff1a<h1 id="title"><\/h1><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
document.getElementsByClassName<\/strong><\/h3>\n\n\n\n
\u53ef\u53d6\u5f97\u55ae\u6216\u8907\u6578\u540c\u985e\u540d\u5143\u7d20\u3002<\/p>\n\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<<\/span>div<\/span> <\/span>class<\/span>=<\/span>"block"<\/span>><\/<\/span>div<\/span>><\/span><\/span>\n<<\/span>div<\/span> <\/span>class<\/span>=<\/span>"block"<\/span>><\/<\/span>div<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
JavaScript<\/span><\/span><\/path><\/path><\/svg><\/span>
let<\/span> el<\/span>=<\/span>document<\/span>.<\/span>getElementsByClassName<\/span>(<\/span>'<\/span>block<\/span>'<\/span>)<\/span>;<\/span><\/span>\nel<\/span>.<\/span>length<\/span>(el)<\/span><\/span>\n\/\/Output:2<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
document.querySelector<\/strong><\/h4>\n\n\n\n
\u53d6\u55ae\u500b\u5143\u7d20\uff0c\u82e5\u6709\u8907\u6578\u540c\u547d\u540d\u53ea\u6703\u53d6\u7b2c\u4e00\u500b\u503c\u3002<\/p>\n\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<<\/span>ul<\/span>><\/span><\/span>\n<<\/span>li<\/span> <\/span>class<\/span>=<\/span>"name"<\/span>>Dorami<\/<\/span>li<\/span>><\/span><\/span>\n<<\/span>li<\/span> <\/span>class<\/span>=<\/span>"name"<\/span>>Doraemon<\/<\/span>li<\/span>><\/span><\/span>\n<\/<\/span>ul<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
JavaScript<\/span><\/span><\/path><\/path><\/svg><\/span>
const<\/span> list<\/span>=<\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>'<\/span>.name<\/span>'<\/span>)<\/span><\/span>\nconsole<\/span>.<\/span>log<\/span>(list)<\/span>;<\/span><\/span>\n\/\/Output:Dorami<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
document.querySelectorAll<\/strong><\/h3>\n\n\n\n
\u53ef\u9078\u53d6\u91cd\u8907\u985e\u540d\u76f8\u540c\u5143\u7d20\uff0c\u89e3\u6790\u7db2\u9801\u6642\u6703\u7531\u4e0a\u81f3\u4e0b\u904d\u6b77DOM\u53d6\u51fa\u300c\u5168\u90e8\u76f8\u540c\u300d\u7bc0\u9ede\u4ee5\u985e\u9663\u5217\u65b9\u5f0f\u56de\u50b3\u3002<\/p>\n\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<<\/span>ul<\/span>><\/span><\/span>\n<<\/span>li<\/span> <\/span>class<\/span>=<\/span>"name"<\/span>><\/<\/span>li<\/span>><\/span><\/span>\n<<\/span>li<\/span> <\/span>class<\/span>=<\/span>"name"<\/span>><\/<\/span>li<\/span>><\/span><\/span>\n<\/<\/span>ul<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
JavaScript<\/span><\/span><\/path><\/path><\/svg><\/span>
const<\/span> list<\/span>=<\/span>document<\/span>.<\/span>querySelectorAll<\/span>(<\/span>'<\/span>.name<\/span>'<\/span>)<\/span>;<\/span><\/span>\nconsole<\/span>.<\/span>log<\/span>(list<\/span>.<\/span>length)<\/span>;<\/span><\/span>\n\/\/Output: 2<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\n
<\/p>\n<\/div><\/div>\n\n\n\n
\u7528JS\u6539\u8b8a\u7d50\u69cb<\/h2>\n\n\n\n
\u53ef\u4ee5\u900f\u904eJS\u5169\u7a2e\u65b9\u5f0f\u52d5\u614b\u65b0\u589e\u7bc0\u9ede\uff0c\u5206\u5225\u662fcreateElement, innerHTML\uff0c\u4e0d\u904e\u524d\u8005\u6703\u5beb\u6bd4\u8f03\u591a\u884c\u7a0b\u5f0f\u78bc\uff0c\u5f8c\u8005\u5c07\u5b57\u4e32\u7d44\u5408\u5f8c\u4e00\u6b21\u5e36\u5165\u5373\u53ef\uff0c\u6211\u5011\u8acb\u5927\u96c4\u8ddf\u5bb6\u4eba\u505a\u793a\u7bc4\u3002<\/p>\n\n\n\n
CreateElement<\/strong><\/h3>\n\n\n\n
JS\u4e2d\u4f7f\u7528CreateElement\u589e\u52a0\u7bc0\u9ede\uff0c\u5c07\u8a72\u5143\u7d20\u7bc0\u9ede\u900f\u904eappendChild\u52a0\u5165DOM\u6307\u5b9a\u7bc0\u9ede\u4e4b\u4e0b\u3002<\/p>\n\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<<\/span>ul<\/span> <\/span>class<\/span>=<\/span>"family"<\/span>><\/<\/span>ul<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
JavaScript<\/span><\/span><\/path><\/path><\/svg><\/span>
\/\/createElement<\/span><\/span>\n<\/span>\nlet<\/span> getel<\/span>=<\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>'<\/span>.family<\/span>'<\/span>)<\/span><\/span>\nconst<\/span> family<\/span>=<\/span>[<\/span><\/span>\n{<\/span> <\/span>name<\/span>:<\/span>'<\/span>NOBITA<\/span>'<\/span>,<\/span><\/span>\n  <\/span>food<\/span>:<\/span>'<\/span>pancake<\/span>'<\/span>,<\/span><\/span>\nimg<\/span>:<\/span>'<\/span>https:\/\/chinesedora.com\/character\/nobita_mes.gif<\/span>'<\/span><\/span>\n},<\/span><\/span>\n{<\/span> <\/span>name<\/span>:<\/span>'<\/span>DoRAEMON<\/span>'<\/span>,<\/span><\/span>\n  <\/span>food<\/span>:<\/span>'<\/span>Dorayaki<\/span>'<\/span>,<\/span><\/span>\nimg<\/span>:<\/span>'<\/span>https:\/\/chinesedora.com\/character\/doraemon12.png<\/span>'<\/span><\/span>\n},<\/span><\/span>\n{<\/span> <\/span>name<\/span>:<\/span>"<\/span>NOBITA's Dad<\/span>"<\/span>,<\/span><\/span>\n\t<\/span>food<\/span>:<\/span>'<\/span>Dorayaki<\/span>'<\/span>,<\/span><\/span>\n  <\/span>img<\/span>:<\/span>'<\/span>https:\/\/chinesedora.com\/images\/nobifa.jpg<\/span>'<\/span><\/span>\n},<\/span><\/span>\n{<\/span> <\/span>name<\/span>:<\/span>"<\/span>NOBITA's Mom<\/span>"<\/span>,<\/span><\/span>\n\t<\/span>food<\/span>:<\/span>'<\/span>Dorayaki<\/span>'<\/span>,<\/span><\/span>\nimg<\/span>:<\/span>'<\/span>https:\/\/chinesedora.com\/images\/nobima.jpg<\/span>'<\/span><\/span>\n}<\/span><\/span>\n]<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>addEl<\/span>(){<\/span><\/span>\n <\/span>for<\/span> (<\/span>let<\/span> <\/span>i<\/span>=<\/span>0<\/span>;<\/span>i<\/span><<\/span>family<\/span>.<\/span>length<\/span>;<\/span>i<\/span>++<\/span>)<\/span>{<\/span><\/span>\n\/\/name<\/span><\/span>\nlet<\/span> <\/span>addName<\/span>=<\/span>document<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>li<\/span>'<\/span>)<\/span>;<\/span><\/span>\naddName<\/span>.<\/span>textContent<\/span>=<\/span>family<\/span>[<\/span>i<\/span>]<\/span>.<\/span>name<\/span>;<\/span><\/span>\ngetel<\/span>.<\/span>appendChild<\/span>(<\/span>addName<\/span>)<\/span>;<\/span><\/span>\n   <\/span><\/span>\n\/\/food<\/span><\/span>\nlet<\/span> <\/span>addFood<\/span>=<\/span>document<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>p<\/span>'<\/span>)<\/span>;<\/span><\/span>\naddFood<\/span>.<\/span>textContent<\/span>=<\/span>'<\/span>\u6211\u559c\u6b61\u5403<\/span>'<\/span>+<\/span>family<\/span>[<\/span>i<\/span>]<\/span>.<\/span>food<\/span>;<\/span><\/span>\naddName<\/span>.<\/span>appendChild<\/span>(<\/span>addFood<\/span>)<\/span>;<\/span><\/span>\n   <\/span><\/span>\n\/\/img<\/span><\/span>\nlet<\/span> <\/span>addImg<\/span>=<\/span>document<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>img<\/span>'<\/span>)<\/span><\/span>\naddImg<\/span>.<\/span>src<\/span>=<\/span>family<\/span>[<\/span>i<\/span>]<\/span>.<\/span>img<\/span>;<\/span><\/span>\naddName<\/span>.<\/span>appendChild<\/span>(<\/span>addImg<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span>\n}<\/span><\/span>\n  <\/span><\/span>\naddEl<\/span>()<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
innerHTML<\/strong><\/h3>\n\n\n\n
\u53ef\u4ee5\u900f\u904eDOM\u5c6c\u6027\u8655\u7406\u5df2\u5b58\u5728HTML\u7bc0\u9ede\uff0c\u82e5\u500b\u5225\u5e36\u5165\u8cc7\u6599\uff0c\u5f97\u5728\u8ff4\u5708\u4e4b\u5916\u653e\u7a7a\u5b57\u4e32\uff0c\u5c07\u6bcf\u7b46\u8cc7\u6599\u653e\u5165\u5ba3\u544a\u7a7a\u5b57\u4e32\u986f\u793a\u7d50\u679c\u3002<\/p>\n\n\n\n
HTML<\/span><\/span><\/path><\/path><\/svg><\/span>
<<\/span>ul<\/span> <\/span>class<\/span>=<\/span>"family"<\/span>><\/<\/span>ul<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
JavaScript<\/span><\/span><\/path><\/path><\/svg><\/span>
\/\/InnerHTML<\/span><\/span>\n<\/span>\nlet<\/span> getel<\/span>=<\/span>document<\/span>.<\/span>querySelector<\/span>(<\/span>'<\/span>.family<\/span>'<\/span>)<\/span><\/span>\nconst<\/span> family<\/span>=<\/span>[<\/span><\/span>\n{<\/span> <\/span>name<\/span>:<\/span>'<\/span>NOBITA<\/span>'<\/span>,<\/span><\/span>\n  <\/span>food<\/span>:<\/span>'<\/span>pancake<\/span>'<\/span>,<\/span><\/span>\nimg<\/span>:<\/span>'<\/span>https:\/\/chinesedora.com\/character\/nobita_mes.gif<\/span>'<\/span><\/span>\n},<\/span><\/span>\n{<\/span> <\/span>name<\/span>:<\/span>'<\/span>DoRAEMON<\/span>'<\/span>,<\/span><\/span>\n  <\/span>food<\/span>:<\/span>'<\/span>Dorayaki<\/span>'<\/span>,<\/span><\/span>\nimg<\/span>:<\/span>'<\/span>https:\/\/chinesedora.com\/character\/doraemon12.png<\/span>'<\/span><\/span>\n},<\/span><\/span>\n{<\/span> <\/span>name<\/span>:<\/span>"<\/span>NOBITA's Dad<\/span>"<\/span>,<\/span><\/span>\n\t<\/span>food<\/span>:<\/span>'<\/span>Dorayaki<\/span>'<\/span>,<\/span><\/span>\n  <\/span>img<\/span>:<\/span>'<\/span>https:\/\/chinesedora.com\/images\/nobifa.jpg<\/span>'<\/span><\/span>\n},<\/span><\/span>\n{<\/span> <\/span>name<\/span>:<\/span>"<\/span>NOBITA's Mom<\/span>"<\/span>,<\/span><\/span>\n\t<\/span>food<\/span>:<\/span>'<\/span>Dorayaki<\/span>'<\/span>,<\/span><\/span>\nimg<\/span>:<\/span>'<\/span>https:\/\/chinesedora.com\/images\/nobima.jpg<\/span>'<\/span><\/span>\n}<\/span><\/span>\n]<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>addEl<\/span>(){<\/span><\/span>\nlet<\/span> <\/span>str<\/span>=<\/span>''<\/span><\/span>\n <\/span>for<\/span> (<\/span>let<\/span> <\/span>i<\/span>=<\/span>0<\/span>;<\/span>i<\/span><<\/span>family<\/span>.<\/span>length<\/span>;<\/span>i<\/span>++<\/span>)<\/span>{<\/span><\/span>\nlet<\/span> <\/span>addInfo<\/span>=<\/span>`<\/span> <\/span><\/span>\n    <li><\/span><\/span>\n        <p><\/span>${<\/span>family[i]<\/span>.<\/span>name<\/span>}<\/span><\/p><\/span><\/span>\n        <p>\u6211\u559c\u6b61\u5403<\/span>${<\/span>family[i]<\/span>.<\/span>food<\/span>}<\/span><\/p><\/span><\/span>\n        <img src="<\/span>${<\/span>family[i]<\/span>.<\/span>img<\/span>}<\/span>"><\/span><\/span>\n      <\/li><\/span><\/span>\n    <\/span>`<\/span>;<\/span><\/span>\nstr<\/span>+=<\/span>addInfo<\/span>;<\/span><\/span>\ngetel<\/span>.<\/span>innerHTML<\/span>=<\/span>str<\/span>;<\/span><\/span>\n}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n<\/span>\n<\/span>\naddEl<\/span>()<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\u53ef\u4ee5\u770b\u5230\u51fd\u5f0f\u5167\u4f7f\u7528\u5169\u8005\u8655\u7406\u65b9\u5f0f\u4e0d\u540c\uff0c\u5f8c\u8005\u96d6\u7136\u7a0b\u5f0f\u78bc\u884c\u6578\u8f03\u5c11\uff0c\u4f46innerHTML\u5728\u904b\u7528\u4e0a\u8981\u5c0f\u5fc3XSS\u554f\u984c\uff0c\u4e0b\u65b9\u6dfa\u8ac7\u4f55\u70baXSS\u3002<\/p>\n\n\n\n
\u9810\u9632\u6f5b\u5728 XSS\uff08Cross-Site Scripting)\u653b\u64ca<\/h2>\n\n\n\n
\u8de8\u7ad9\u8173\u672c\u653b\u64ca\uff08Cross-Site Scripting, XSS)\uff0cAttacker\u900f\u904e\u7db2\u7ad9\u6f0f\u6d1e\u7d50\u5408\u7528\u6236\u64cd\u4f5c\u65b9\u5f0f\uff0c\u5982\uff1a\u8f38\u5165\u5b57\u4e32\u6b04\u4f4d\u3001URL\u3001Cookie \u57cb\u5165\u60e1\u610f\u8173\u672c\u81f3\u76ee\u6a19\u7db2\u7ad9\uff0c\u4e4b\u5f8c\u8a2a\u554f\u7684\u7528\u6236\u9032\u884c\u700f\u89bd\u4fbf\u6210\u70ba\u653b\u64ca\u5c0d\u8c61\u3002<\/p>\n\n\n\n
XSS\u4e09\u7a2e\u653b\u64ca\u65b9\u5f0f[1] \uff1aReflected, DOM-based XSS, Stored XSS\uff0c\u7a0d\u70ba\u89e3\u91cb\u5728<\/em>\u4e0d\u540c\u5834\u666f\u6703\u767c\u751f\u7684\u653b\u64ca\u60c5\u5883\u3002<\/p>\n\n\n\n
\u53cd\u5c04\u578b\u653b\u64ca\uff08Reflected\uff09<\/h3>\n\n\n\n
Attacker\u900f\u904e\u8f38\u5165\u6b04\u4f4d\u5beb\u5165\u60e1\u610f\u8173\u672c\u3002\u7576\u9001\u51fa\u8acb\u6c42\u5230\u4f3a\u670d\u5668\u5f8c\u6703\u904b\u884c\u7a0b\u5f0f\u78bc\uff0c\u4f3a\u670d\u5668\u8fd4\u56de\u7d66\u7528\u6236\u756b\u9762\u6703\u5305\u542b\u525b\u624d\u8f38\u5165\u8173\u672c\u5f8c\u6240\u986f\u793a\u7684\u7d50\u679c\uff0c\u4e4b\u5f8c\u6709\u5176\u4ed6\u7528\u6236\u8a2a\u554f\u5e36\u6709\u9019\u500b\u653b\u64ca\u8173\u672c\u7684\u7279\u6b8a\u8acb\u6c42\u6642\uff0c\u4f3a\u670d\u5668\u6703\u5c07\u8173\u672c\u53cd\u5c04\u56de\u7528\u6236\u7684\u700f\u89bd\u5668\u57f7\u884c\u6b64\u5e36\u6709\u60e1\u610f\u8173\u672c\u7684\u756b\u9762\u3002<\/p>\n\n\n\n
\u5132\u5b58\u578b\u653b\u64ca(Stored XSS\uff09<\/h3>\n\n\n\n
\u7528\u6236\u5728\u8a02\u95b1\u7db2\u7ad9\u670d\u52d9\u586b\u5beb\u500b\u4eba\u8cc7\u6599\uff0c\u5982\u4fe1\u7528\u5361\u865f\u7b49\u2026\uff0cAttacker\u6b32\u63d0\u53d6\u8cc7\u6599\u6216\u653b\u64ca\u7db2\u7ad9\uff0c\u53ef\u4ee5\u5728\u6b04\u4f4d\u4e2d\u57cb\u4e0bJS\u8173\u672c\u5b58\u9032\u7db2\u7ad9\u8cc7\u6599\u5eab\uff0c\u5f80\u5f8c\u7528\u6236\u5728\u9019\u9801\u63d0\u4ea4\u654f\u611f\u8cc7\u6599\uff0c\u4fbf\u53ef\u80fd\u6709\u76dc\u53d6\u8cc7\u6599\u98a8\u96aa\u3002<\/p>\n\n\n\n
\u6587\u6a94\u7269\u4ef6\u6a21\u578b\u653b\u64ca\uff08DOM-based XSS\uff09<\/em><\/h3>\n\n\n\n
\u8207\u53cd\u5c04\u578b\u96f7\u540c\uff0c\u4e0d\u540c\u4e4b\u8655\u5728\u65bcDOM-based XSS\u662f\u5728\u7528\u6236\u7aef\u700f\u89bd\u5668\u524d\u7aef\u57f7\u884c\uff0c\u800c\u4e0d\u662f\u5728\u4f3a\u670d\u5668\u3002\u900f\u904eJavascript \u6f0f\u6d1e\u5c07\u60e1\u610f\u8173\u672c\u5d4c\u5165DOM\u7bc0\u9ede\u4e4b\u4e2d\uff0c\u7576\u7528\u6236\u8f38\u5165\u6b04\u4f4d\u64cd\u4f5c\uff0c\u57f7\u884cAttacker\u7684\u8173\u672c\uff0c\u9032\u884c\u7aca\u53d6\u4fe1\u606f\u7b49..\u653b\u64ca\u884c\u70ba\u3002<\/p>\n\n\n\n
 innerHTML\u548ccreateElement \u8ddfXSS\u6709\u4ec0\u9ebc\u95dc\u806f\uff1f<\/h2>\n\n\n\n
\u9019\u88e1\u7528\u5132\u5b58\u578b\u653b\u64ca(Stored XSS\uff09\u89e3\u91cb\uff0c\u900f\u904eCreateElement\u5efa\u7acb\u7684input\uff0c\u6211\u5011\u5c07\u7528\u6236\u8f38\u5165\u7684\u53c3\u6578\u8f49\u6210\u6587\u672c\u7bc0\u9ede\uff0c\u6240\u4ee5\u5728\u6b04\u4f4d\u8f38\u5165<script><\/script>\u63d0\u4ea4\u5167\u5bb9\u9001\u5230\u8cc7\u6599\u5eab\uff0c\u6703\u88ab\u7576\u4f5c\u7d14\u6587\u5b57\uff08plaintext\uff09\u8655\u7406\uff0c\u4e0d\u904e\u8f49\u70baString\uff0c\u4e0d\u4ee3\u8868\u5b89\u5168\uff0cAttacker\u9084\u662f\u53ef\u4ee5\u900f\u904e\u5176\u4ed6\u624b\u6cd5\uff0c\u7e5e\u904e\u4e00\u4e9b\u7c21\u55ae\u7684\u9632\u8b77\u6a5f\u5236\u653b\u64ca\u3002<\/p>\n\n\n\n
\u56e0\u6b64\uff0c\u9700\u8981\u984d\u5916\u5b89\u5168\u6a5f\u5236\u50cf\u662f\uff1a\u5167\u5bb9\u5b89\u5168\u653f\u7b56[2]\uff08Content Security Policy, CSP)\uff0c\u5141\u8a31\u7db2\u7ad9\u64c1\u6709\u8005\u5236\u5b9a\u4e00\u7d44\u898f\u5247\uff0c\u6307\u5b9a\u54ea\u4e9b\u4f86\u6e90\u7684\u8cc7\u6e90\u53ef\u4ee5\u88ab\u8f09\u5165\u5230\u7db2\u9801\u4e2d\uff0c\u5728\u7528\u6236\u9001\u51fa\u6642\u8acb\u700f\u89bd\u5668\u5728\u5e6b\u5fd9\u6aa2\u67e5\u4e00\u6b21\uff0c\u82e5\u6709\u4e0d\u7b26\u5141\u8a31\u884c\u70ba\uff0c\u53ef\u4ee5\u963b\u64cb\u9019\u4e9b\u8cc7\u6e90\u7684\u8f09\u5165\u3002<\/p>\n\n\n\n
JavaScript<\/span><\/span><\/path><\/path><\/svg><\/span>
const<\/span> getEl <\/span>=<\/span> document<\/span>.<\/span>querySelector<\/span>(<\/span>'<\/span>.form<\/span>'<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> addInput <\/span>=<\/span> document<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>input<\/span>'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n\/\/\u7528\u6236\u5728\u6b04\u4f4d\u8f38\u5165\u5167\u5bb9<\/span><\/span>\nconst<\/span> userType<\/span>=<\/span>"<\/span><script>'alert('\u6069\u6211\u5728\u653b\u64ca\u4f60')';<\/script><\/span>"<\/span>;<\/span><\/span>\n\/\/\u8f49\u70ba\u7d14\u6587\u5b57<\/span><\/span>\nconst<\/span> textNode<\/span>=<\/span>document<\/span>.<\/span>createTextNode<\/span>(userType)<\/span>;<\/span><\/span>\n<\/span>\naddInput<\/span>.<\/span>appendChild<\/span>(textNode)<\/span>;<\/span><\/span>\ngetEl<\/span>.<\/span>appendChild<\/span>(addInput)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\u800c\u76f8\u540c\u60c5\u5883\u4ee5innerHTML\u5beb\u6cd5\uff0c\u6703\u88abhtml\u8996\u70ba\u7a0b\u5f0f\u78bc\u57f7\u884cAttacker\u8173\u672c\u3002<\/p>\n\n\n\n
JavaScript<\/span><\/span><\/path><\/path><\/svg><\/span>
const<\/span> getEl <\/span>=<\/span> document<\/span>.<\/span>querySelector<\/span>(<\/span>'<\/span>.form<\/span>'<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> addInput <\/span>=<\/span> document<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>input<\/span>'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n\/\/ \u5047\u8a2d\u7528\u6236\u5728\u6b04\u4f4d\u8f38\u5165\u5167\u5bb9<\/span><\/span>\nconst<\/span> userType <\/span>=<\/span> <\/span>"<\/span><script>alert('\u6069\u6211\u5728\u653b\u64ca\u4f60');<\/script><\/span>"<\/span>;<\/span><\/span>\n<\/span>\n\/\/ innerHTML \u5c07\u7528\u6236\u8f38\u5165\u7684\u5167\u5bb9\u8a2d\u7f6e\u5230 input \u5143\u7d20\u4e2d<\/span><\/span>\naddInput<\/span>.<\/span>innerHTML <\/span>=<\/span> userType<\/span>;<\/span><\/span>\n<\/span>\ngetEl<\/span>.<\/span>appendChild<\/span>(addInput)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\u4e0d\u904e\uff0c\u4e0a\u8ff0\u4e26\u975e\u6307createElement vs. innerHTML \u9078\u64c7\u524d\u8005\u5b89\u5168\u6027\u8f03\u9ad8\uff0c\u4ee5\u7b46\u8005\u76ee\u524d\u641c\u96c6\u8cc7\u6599\u4f86\u770b\uff0c\u9084\u662f\u5f97\u53d6\u6c7a\u65bc\u60c5\u5883\u4f7f\u7528\uff0c\u4f8b\u5982\u4f60\u7121\u6cd5\u638c\u63a7\u7528\u6236\u6703\u63d0\u4f9b\u7db2\u7ad9\u4ec0\u9ebc\u8cc7\u6599\uff0c\u50cf\u662f\u8f38\u5165\u6b04\u4f4d\u5efa\u8b70\u7528createElement\uff0c\u964d\u4f4eXSS\u653b\u64ca\u3002<\/p>\n\n\n\n
\u800c\u6b64\u6587\u4e2d\u63d0\u53caCreateElement\u589e\u52a0\u7bc0\u9ede\uff0c\u50c5\u662f\u5176\u4e2d\u4e00\u9805\u57fa\u672c\u9810\u9632\u63aa\u65bd\uff0c\u76ee\u524d\u770b\u5230\u6709\u95dcXSS\u6280\u8853\u6587\u7ae0\uff0c\u5927\u591a\u5efa\u8b70\u7db2\u7ad9\u505a\u9a57\u8b49\u6216\u904e\u6ffe\u5b57\u4e32\u7b49\u2026\u589e\u52a0\u5b89\u5168\u6a5f\u5236\u5beb\u6cd5\uff0c\u6e1b\u5c11\u88ab\u653b\u64ca\u7684\u53ef\u80fd\u6027\u3002<\/p>\n\n\n\n
\u4e0a\u8ff0\u4ee5\u662f\u521d\u5b78XSS<\/em>\u7406\u89e3\u7bc4\u570d\u505a\u7b46\u8a18\uff0c\u82e5\u5f80\u5f8c\u5c0dXSS\u6709\u66f4\u8fd1\u4e00\u6b65\u5b78\u7fd2\u518d\u505a\u6574\u7406<\/em>\u3002<\/p>\n\n\n\n
\u6b64\u70ba\u7d00\u9304\u5b78\u7fd2\u904e\u7a0b\uff0c\u5982\u5167\u5bb9\u6709\u8aa4\uff0c\u6b61\u8fce\u7559\u8a00\u6307\u6559\u3002
\u5076\u723e\u6703\u756b\u5716\u4f86\u7406\u89e3\u7a0b\u5f0f\u78bc\uff0c\u82e5\u5167\u6587\u5716\u50cf\u6216\u6d41\u7a0b\u5716\u5c0d\u4f60\u7406\u89e3\u6709\u5e6b\u52a9\uff0c\u6b61\u8fce\u81ea\u884c\u53d6\u7528\u3002<\/p>\n\n\n\n
\u53c3\u8003:<\/p>\n\n\n\n
[ 1 ]\u96f6\u57fa\u790e\u8cc7\u5b89\u7cfb\u5217\uff08\u4e8c\uff09-\u8a8d\u8b58 XSS\uff08Cross-Site Scripting\uff09<\/a><\/strong><\/p>\n\n\n\n
[ 2 ]CSP:\u4f60\u53ef\u80fd\u4e0d\u77e5\u9053\u7684\u5167\u5bb9\u5b89\u5168\u7b56\u7565(Content-Security-Policy, CSP)<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Cover Credits to Ole […]<\/p>\n","protected":false},"author":1,"featured_media":85104,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-85094","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"\n[Note]'innerHTML' and 'createElement' Methods for DOM Element Manipulation.-JavaScript -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/\" \/>\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Note]'innerHTML' and 'createElement' Methods for DOM Element Manipulation.-JavaScript -\" \/>\n<meta property=\"og:description\" content=\"Cover Credits to Ole […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-15T14:12:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-15T11:14:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/abbyhsia.com\/wp-content\/uploads\/2023\/12\/image_processing20201020-3646-1ff95lv.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Abby\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abby\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u5206\u9418\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/\"},\"author\":{\"name\":\"Abby\",\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/#\\\/schema\\\/person\\\/2c40b572cad326aa2312d15fb355afd2\"},\"headline\":\"[Note]’innerHTML’ and ‘createElement’ Methods for DOM Element Manipulation.-JavaScript\",\"datePublished\":\"2023-12-15T14:12:54+00:00\",\"dateModified\":\"2025-04-15T11:14:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/\"},\"wordCount\":141,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/abbyhsia.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/image_processing20201020-3646-1ff95lv.gif\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/\",\"url\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/\",\"name\":\"[Note]'innerHTML' and 'createElement' Methods for DOM Element Manipulation.-JavaScript -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/abbyhsia.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/image_processing20201020-3646-1ff95lv.gif\",\"datePublished\":\"2023-12-15T14:12:54+00:00\",\"dateModified\":\"2025-04-15T11:14:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/#\\\/schema\\\/person\\\/2c40b572cad326aa2312d15fb355afd2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/abbyhsia.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/image_processing20201020-3646-1ff95lv.gif\",\"contentUrl\":\"https:\\\/\\\/abbyhsia.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/image_processing20201020-3646-1ff95lv.gif\",\"width\":1600,\"height\":1200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/2023\\\/12\\\/15\\\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/abbyhsia.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Note]’innerHTML’ and ‘createElement’ Methods for DOM Element Manipulation.-JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/#website\",\"url\":\"https:\\\/\\\/abbyhsia.com\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/abbyhsia.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/abbyhsia.com\\\/#\\\/schema\\\/person\\\/2c40b572cad326aa2312d15fb355afd2\",\"name\":\"Abby\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cd29a57a8d18bf1bcbba6f673c41bda7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cd29a57a8d18bf1bcbba6f673c41bda7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cd29a57a8d18bf1bcbba6f673c41bda7?s=96&d=mm&r=g\",\"caption\":\"Abby\"},\"url\":\"https:\\\/\\\/abbyhsia.com\\\/index.php\\\/author\\\/joyce505033gmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Note]'innerHTML' and 'createElement' Methods for DOM Element Manipulation.-JavaScript -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/","og_locale":"zh_TW","og_type":"article","og_title":"[Note]'innerHTML' and 'createElement' Methods for DOM Element Manipulation.-JavaScript -","og_description":"Cover Credits to Ole […]","og_url":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/","article_published_time":"2023-12-15T14:12:54+00:00","article_modified_time":"2025-04-15T11:14:46+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/abbyhsia.com\/wp-content\/uploads\/2023\/12\/image_processing20201020-3646-1ff95lv.gif","type":"image\/gif"}],"author":"Abby","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005:":"Abby","\u9810\u4f30\u95b1\u8b80\u6642\u9593":"2 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/#article","isPartOf":{"@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/"},"author":{"name":"Abby","@id":"https:\/\/abbyhsia.com\/#\/schema\/person\/2c40b572cad326aa2312d15fb355afd2"},"headline":"[Note]’innerHTML’ and ‘createElement’ Methods for DOM Element Manipulation.-JavaScript","datePublished":"2023-12-15T14:12:54+00:00","dateModified":"2025-04-15T11:14:46+00:00","mainEntityOfPage":{"@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/"},"wordCount":141,"commentCount":0,"image":{"@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/#primaryimage"},"thumbnailUrl":"https:\/\/abbyhsia.com\/wp-content\/uploads\/2023\/12\/image_processing20201020-3646-1ff95lv.gif","articleSection":["Uncategorized"],"inLanguage":"zh-TW","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/","url":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/","name":"[Note]'innerHTML' and 'createElement' Methods for DOM Element Manipulation.-JavaScript -","isPartOf":{"@id":"https:\/\/abbyhsia.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/#primaryimage"},"image":{"@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/#primaryimage"},"thumbnailUrl":"https:\/\/abbyhsia.com\/wp-content\/uploads\/2023\/12\/image_processing20201020-3646-1ff95lv.gif","datePublished":"2023-12-15T14:12:54+00:00","dateModified":"2025-04-15T11:14:46+00:00","author":{"@id":"https:\/\/abbyhsia.com\/#\/schema\/person\/2c40b572cad326aa2312d15fb355afd2"},"breadcrumb":{"@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/#primaryimage","url":"https:\/\/abbyhsia.com\/wp-content\/uploads\/2023\/12\/image_processing20201020-3646-1ff95lv.gif","contentUrl":"https:\/\/abbyhsia.com\/wp-content\/uploads\/2023\/12\/image_processing20201020-3646-1ff95lv.gif","width":1600,"height":1200},{"@type":"BreadcrumbList","@id":"https:\/\/abbyhsia.com\/index.php\/2023\/12\/15\/noteinnerhtml-and-createelement-methods-for-dom-element-manipulation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/abbyhsia.com\/"},{"@type":"ListItem","position":2,"name":"[Note]’innerHTML’ and ‘createElement’ Methods for DOM Element Manipulation.-JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/abbyhsia.com\/#website","url":"https:\/\/abbyhsia.com\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/abbyhsia.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"},{"@type":"Person","@id":"https:\/\/abbyhsia.com\/#\/schema\/person\/2c40b572cad326aa2312d15fb355afd2","name":"Abby","image":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/secure.gravatar.com\/avatar\/cd29a57a8d18bf1bcbba6f673c41bda7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cd29a57a8d18bf1bcbba6f673c41bda7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd29a57a8d18bf1bcbba6f673c41bda7?s=96&d=mm&r=g","caption":"Abby"},"url":"https:\/\/abbyhsia.com\/index.php\/author\/joyce505033gmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/posts\/85094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/comments?post=85094"}],"version-history":[{"count":56,"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/posts\/85094\/revisions"}],"predecessor-version":[{"id":86329,"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/posts\/85094\/revisions\/86329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/media\/85104"}],"wp:attachment":[{"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/media?parent=85094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/categories?post=85094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abbyhsia.com\/index.php\/wp-json\/wp\/v2\/tags?post=85094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}