{"id":273408,"date":"2024-05-16T13:38:25","date_gmt":"2024-05-16T05:38:25","guid":{"rendered":"https:\/\/docs.pingcode.com\/ask\/ask-ask\/273408.html"},"modified":"2024-05-16T13:38:33","modified_gmt":"2024-05-16T05:38:33","slug":"javascript-%e9%a1%b9%e7%9b%ae%e7%a8%8b%e5%ba%8f%e5%a6%82%e4%bd%95%e5%8a%a8%e6%80%81%e5%88%9b%e5%bb%ba-div-%e5%b1%9e%e6%80%a7-2","status":"publish","type":"post","link":"https:\/\/docs.pingcode.com\/ask\/273408.html","title":{"rendered":"JavaScript \u9879\u76ee\u7a0b\u5e8f\u5982\u4f55\u52a8\u6001\u521b\u5efa div \u5c5e\u6027"},"content":{"rendered":"

\"JavaScript<\/p>\n

JavaScript \u9879\u76ee\u4e2d\u52a8\u6001\u521b\u5efa div<\/code> \u5c5e\u6027\u7684\u6838\u5fc3\u65b9\u5f0f\u5305\u62ec \u4f7f\u7528 document.createElement<\/code> \u65b9\u6cd5\u521b\u5efa\u65b0\u7684 div<\/code>\u3001\u4f7f\u7528 setAttribute<\/code> \u65b9\u6cd5\u7ed9 div<\/code> \u6dfb\u52a0\u5c5e\u6027\u3001\u901a\u8fc7 innerHTML<\/code> \u6216 textContent<\/code> \u8bbe\u7f6e\u5185\u5bb9<\/strong>\u3002\u5c55\u5f00\u63cf\u8ff0\u7b2c\u4e00\u70b9\uff0c\u4f7f\u7528 document.createElement<\/code> \u662f\u52a8\u6001\u521b\u5efa HTML \u5143\u7d20\u7684\u9996\u8981\u6b65\u9aa4\u3002\u6b64\u65b9\u6cd5\u63a5\u53d7\u4e00\u4e2a\u5b57\u7b26\u4e32\u53c2\u6570\uff0c\u8be5\u53c2\u6570\u6307\u5b9a\u8981\u521b\u5efa\u7684\u5143\u7d20\u7c7b\u578b\u3002\u521b\u5efa\u540e\u7684\u5143\u7d20\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5b83\u53ef\u4ee5\u88ab\u8fdb\u4e00\u6b65\u914d\u7f6e\uff08\u5982\u6dfb\u52a0\u5c5e\u6027\u3001\u8bbe\u7f6e\u5185\u5bb9\u7b49\uff09\uff0c\u6700\u540e\u901a\u8fc7 appendChild<\/code> \u6216 insertBefore<\/code> \u65b9\u6cd5\u63d2\u5165\u5230 DOM \u4e2d\u3002\u8fd9\u4e2a\u8fc7\u7a0b\u4e3a\u540e\u7eed\u52a8\u6001\u6dfb\u52a0\u6837\u5f0f\u3001\u5c5e\u6027\u6216\u7ed1\u5b9a\u4e8b\u4ef6\u63d0\u4f9b\u4e86\u57fa\u7840\u3002<\/p>\n<\/p>\n

\u4e00\u3001\u521b\u5efa\u65b0\u7684 DIV<\/h3>\n<\/p>\n

\u521b\u5efa\u65b0\u7684 div<\/code> \u5143\u7d20\u662f\u52a8\u6001\u6dfb\u52a0 div<\/code> \u5c5e\u6027\u7684\u57fa\u7840\u3002\u9996\u5148\u8981\u7528 document.createElement<\/code> \u65b9\u6cd5\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 div<\/code> \u5143\u7d20\u3002<\/p>\n<\/p>\n

let newDiv = document.createElement("div");<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u8be5\u65b9\u6cd5\u4f1a\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684 div<\/code> \u5143\u7d20\uff0c\u4f46\u6b64\u65f6\u5143\u7d20\u8fd8\u6ca1\u6709\u63d2\u5165\u5230\u6587\u6863\u4e2d\u3002\u4e3a\u4e86\u8ba9\u5b83\u663e\u793a\u51fa\u6765\uff0c\u9700\u8981\u5c06\u5b83\u6dfb\u52a0\u5230 DOM \u6811\u7684\u67d0\u4e2a\u4f4d\u7f6e\u3002<\/p>\n<\/p>\n
\u4e8c\u3001\u4e3a DIV \u6dfb\u52a0\u5c5e\u6027<\/h3>\n<\/p>\n
\u521b\u5efa\u4e86 div<\/code> \u540e\uff0c\u53ef\u4ee5\u4e3a\u5176\u52a8\u6001\u6dfb\u52a0\u5c5e\u6027\u3002\u4f7f\u7528 setAttribute<\/code> \u65b9\u6cd5\u53ef\u4ee5\u4e3a\u5143\u7d20\u6dfb\u52a0\u65b0\u7684\u5c5e\u6027\u6216\u6539\u53d8\u73b0\u6709\u5c5e\u6027\u7684\u503c\u3002<\/p>\n<\/p>\n
newDiv.setAttribute("id", "uniqueID");<\/p>\n
newDiv.setAttribute("class", "box");<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u8fd9\u4e24\u884c\u4ee3\u7801\u4f1a\u5206\u522b\u7ed9\u65b0\u521b\u5efa\u7684 div<\/code> \u6dfb\u52a0\u552f\u4e00\u7684 ID \u548c\u7c7b\u540d\u3002\u8fd9\u662f\u7ba1\u7406\u548c\u5f15\u7528\u7279\u5b9a\u5143\u7d20\u7684\u57fa\u7840\u3002<\/p>\n<\/p>\n
\u4e09\u3001\u8bbe\u7f6e DIV \u5185\u5bb9<\/h3>\n<\/p>\n
\u52a8\u6001\u8bbe\u7f6e div<\/code> \u7684\u5185\u5bb9\u53ef\u4ee5\u4f7f\u7528 innerHTML<\/code> \u6216 textContent<\/code>\u3002<\/p>\n<\/p>\n
newDiv.innerHTML = "<p>Hello World!<\/p>";<\/p>\n
\/\/ \u6216\u8005<\/p>\n
newDiv.textContent = "This is a new div.";<\/p>\n
<\/code><\/pre>\n<\/p>\n
innerHTML<\/code> \u5141\u8bb8\u5305\u542b HTML \u6807\u7b7e\uff0c\u53ef\u4ee5\u63d2\u5165\u590d\u6742\u7684\u5185\u5bb9\u7ed3\u6784\u3002\u800c textContent<\/code> \u4ec5\u7528\u4e8e\u8bbe\u7f6e\u7eaf\u6587\u672c\u5185\u5bb9\uff0c\u4f18\u70b9\u662f\u53ef\u4ee5\u907f\u514d\u8de8\u7ad9\u811a\u672c\u653b\u51fb\uff08XSS\uff09\u3002<\/p>\n<\/p>\n
\u56db\u3001\u5c06 DIV \u63d2\u5165\u6587\u6863\u4e2d<\/h3>\n<\/p>\n
\u6700\u540e\u4e00\u6b65\u662f\u5c06\u521b\u5efa\u5e76\u914d\u7f6e\u597d\u7684 div<\/code> \u63d2\u5230\u9875\u9762\u7684\u6307\u5b9a\u4f4d\u7f6e\u3002\u901a\u5e38\u4f7f\u7528 appendChild<\/code> \u6216 insertBefore<\/code> \u65b9\u6cd5\u3002<\/p>\n<\/p>\n
document.body.appendChild(newDiv);<\/p>\n
\/\/ \u6216\u8005\u63d2\u5165\u5230\u67d0\u4e2a\u7279\u5b9a\u5143\u7d20\u4e4b\u524d<\/p>\n
let contAI<\/a>ner = document.getElementById("container");<\/p>\n
container.insertBefore(newDiv, container.firstChild);<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u8fd9\u6bb5\u4ee3\u7801\u5c06\u65b0\u521b\u5efa\u7684 div<\/code> \u6dfb\u52a0\u5230\u9875\u9762\u7684 <body><\/code> \u4e2d\u6216\u5bb9\u5668\u5143\u7d20\u7684\u6700\u524d\u9762\u3002<\/p>\n<\/p>\n
\u4e94\u3001\u4e3a DIV \u52a8\u6001\u6dfb\u52a0\u6837\u5f0f<\/h3>\n<\/p>\n
\u52a8\u6001\u6dfb\u52a0\u6837\u5f0f\u662f\u4e30\u5bcc div<\/code> \u5c5e\u6027\u7684\u91cd\u8981\u65b9\u9762\u3002\u53ef\u4ee5\u76f4\u63a5\u64cd\u4f5c style<\/code> \u5c5e\u6027\u6216\u4e3a\u5143\u7d20\u6dfb\u52a0\u9884\u5b9a\u4e49\u7684\u6837\u5f0f\u7c7b\u3002<\/p>\n<\/p>\n
newDiv.style.backgroundColor = "blue";<\/p>\n
newDiv.style.width = "100px";<\/p>\n
newDiv.style.height = "100px";<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u6b64\u5904\u76f4\u63a5\u901a\u8fc7\u4fee\u6539 style<\/code> \u5c5e\u6027\u7ed9 div<\/code> \u6dfb\u52a0\u4e86\u80cc\u666f\u989c\u8272\u3001\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u3002\u8fd8\u53ef\u4ee5\u901a\u8fc7\u6dfb\u52a0\u7c7b\u540d\u6765\u5f15\u7528\u9884\u5b9a\u4e49\u7684 CSS \u6837\u5f0f\u3002<\/p>\n<\/p>\n
\u516d\u3001\u7ed1\u5b9a\u4e8b\u4ef6\u76d1\u542c\u5668<\/h3>\n<\/p>\n
\u4e3a div<\/code> \u7ed1\u5b9a\u4e8b\u4ef6\u76d1\u542c\u5668\u662f\u63d0\u9ad8\u4ea4\u4e92\u6027\u7684\u5173\u952e\u3002\u53ef\u4ee5\u901a\u8fc7 addEventListener<\/code> \u65b9\u6cd5\u4e3a\u5143\u7d20\u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\u3002<\/p>\n<\/p>\n
newDiv.addEventListener("click", function() {<\/p>\n
    alert("Div clicked!");<\/p>\n
});<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u8fd9\u4f7f\u5f97\u5f53\u7528\u6237\u70b9\u51fb\u8fd9\u4e2a div<\/code> \u65f6\uff0c\u4f1a\u5f39\u51fa\u4e00\u4e2a\u8b66\u544a\u6846\u3002<\/p>\n<\/p>\n
\u901a\u8fc7\u4e0a\u8ff0\u6b65\u9aa4\uff0c\u53ef\u4ee5\u7075\u6d3b\u5730\u5728 JavaScript \u9879\u76ee\u4e2d\u52a8\u6001\u521b\u5efa\u548c\u914d\u7f6e div<\/code> \u5c5e\u6027\u3002\u8fd9\u4e0d\u4ec5\u589e\u52a0\u4e86\u9875\u9762\u5143\u7d20\u7684\u4e92\u52a8\u6027\uff0c\u8fd8\u63d0\u9ad8\u4e86\u5f00\u53d1\u7684\u7075\u6d3b\u5ea6\u548c\u6548\u7387\u3002<\/p>\n<\/p>\n
\u76f8\u5173\u95ee\u7b54FAQs\uff1a<\/strong><\/h2>\n
1. \u5982\u4f55\u4f7f\u7528JavaScript\u52a8\u6001\u521b\u5efadiv\u5143\u7d20\u7684\u5c5e\u6027\uff1f<\/strong><\/p>\n
\u5728JavaScript\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528createElement\u65b9\u6cd5\u521b\u5efa\u4e00\u4e2a\u65b0\u7684div\u5143\u7d20\uff0c\u7136\u540e\u4f7f\u7528setAttribute\u65b9\u6cd5\u4e3a\u8be5\u5143\u7d20\u6dfb\u52a0\u5c5e\u6027\u3002\u4f8b\u5982\uff0c\u8981\u4e3a\u65b0\u521b\u5efa\u7684div\u5143\u7d20\u6dfb\u52a0\u4e00\u4e2aid\u5c5e\u6027\u548c\u4e00\u4e2aclass\u5c5e\u6027\uff0c\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u8fdb\u884c\u64cd\u4f5c\uff1a<\/p>\n
\/\/ \u521b\u5efa\u4e00\u4e2a\u65b0\u7684div\u5143\u7d20\nvar newDiv = document.createElement("div");\n\n\/\/ \u4e3adiv\u6dfb\u52a0id\u5c5e\u6027\nnewDiv.setAttribute("id", "myDiv");\n\n\/\/ \u4e3adiv\u6dfb\u52a0class\u5c5e\u6027\nnewDiv.setAttribute("class", "myClass");\n\n\/\/ \u5c06\u65b0\u521b\u5efa\u7684div\u5143\u7d20\u6dfb\u52a0\u5230\u9875\u9762\u4e2d\u7684\u67d0\u4e2a\u5bb9\u5668\u4e2d\nvar container = document.getElementById("container");\ncontainer.appendChild(newDiv);\n<\/code><\/pre>\n
\u8fd9\u6837\u5c31\u53ef\u4ee5\u901a\u8fc7JavaScript\u52a8\u6001\u521b\u5efa\u4e00\u4e2a\u5177\u6709\u6307\u5b9a\u5c5e\u6027\u7684div\u5143\u7d20\u5e76\u6dfb\u52a0\u5230\u9875\u9762\u4e2d\u3002<\/p>\n
2. \u5982\u4f55\u4f7f\u7528JavaScript\u52a8\u6001\u4fee\u6539div\u5143\u7d20\u7684\u5c5e\u6027\uff1f<\/strong><\/p>\n
\u8981\u4f7f\u7528JavaScript\u52a8\u6001\u4fee\u6539div\u5143\u7d20\u7684\u5c5e\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7getElementById\u65b9\u6cd5\u83b7\u53d6\u5230\u9700\u8981\u4fee\u6539\u7684div\u5143\u7d20\uff0c\u7136\u540e\u4f7f\u7528setAttribute\u65b9\u6cd5\u4e3a\u5b83\u8bbe\u7f6e\u65b0\u7684\u5c5e\u6027\u503c\u3002\u4f8b\u5982\uff0c\u5982\u679c\u6211\u4eec\u8981\u4fee\u6539id\u4e3a"myDiv"\u7684div\u5143\u7d20\u7684class\u5c5e\u6027\uff0c\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u8fdb\u884c\u64cd\u4f5c\uff1a<\/p>\n
\/\/ \u83b7\u53d6\u9700\u8981\u4fee\u6539\u7684div\u5143\u7d20\nvar myDiv = document.getElementById("myDiv");\n\n\/\/ \u4fee\u6539class\u5c5e\u6027\nmyDiv.setAttribute("class", "newClass");\n<\/code><\/pre>\n
\u8fd9\u6837\u5c31\u53ef\u4ee5\u4f7f\u7528JavaScript\u52a8\u6001\u4fee\u6539div\u5143\u7d20\u7684\u5c5e\u6027\uff0c\u4f7f\u5176\u5177\u6709\u65b0\u7684\u5c5e\u6027\u503c\u3002<\/p>\n
3. \u5982\u4f55\u4f7f\u7528JavaScript\u52a8\u6001\u5220\u9664div\u5143\u7d20\u7684\u5c5e\u6027\uff1f<\/strong><\/p>\n
\u8981\u4f7f\u7528JavaScript\u52a8\u6001\u5220\u9664div\u5143\u7d20\u7684\u5c5e\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7getElementById\u65b9\u6cd5\u83b7\u53d6\u5230\u9700\u8981\u5220\u9664\u5c5e\u6027\u7684div\u5143\u7d20\uff0c\u7136\u540e\u4f7f\u7528removeAttribute\u65b9\u6cd5\u5c06\u6307\u5b9a\u7684\u5c5e\u6027\u4ece\u5143\u7d20\u4e2d\u5220\u9664\u3002\u4f8b\u5982\uff0c\u5982\u679c\u6211\u4eec\u8981\u5220\u9664id\u4e3a"myDiv"\u7684div\u5143\u7d20\u7684class\u5c5e\u6027\uff0c\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u8fdb\u884c\u64cd\u4f5c\uff1a<\/p>\n
\/\/ \u83b7\u53d6\u9700\u8981\u5220\u9664\u5c5e\u6027\u7684div\u5143\u7d20\nvar myDiv = document.getElementById("myDiv");\n\n\/\/ \u5220\u9664class\u5c5e\u6027\nmyDiv.removeAttribute("class");\n<\/code><\/pre>\n
\u8fd9\u6837\u5c31\u53ef\u4ee5\u4f7f\u7528JavaScript\u52a8\u6001\u5220\u9664div\u5143\u7d20\u7684\u5c5e\u6027\u3002\u6ce8\u610f\uff0c\u5982\u679c\u8981\u5220\u9664\u591a\u4e2a\u5c5e\u6027\uff0c\u53ea\u9700\u8981\u591a\u6b21\u8c03\u7528removeAttribute\u65b9\u6cd5\u5373\u53ef\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript \u9879\u76ee\u4e2d\u52a8\u6001\u521b\u5efa div \u5c5e\u6027\u7684\u6838\u5fc3\u65b9\u5f0f\u5305\u62ec \u4f7f\u7528 document.createElem […]","protected":false},"author":3,"featured_media":273417,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[37],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/posts\/273408"}],"collection":[{"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/comments?post=273408"}],"version-history":[{"count":0,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/posts\/273408\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/media\/273417"}],"wp:attachment":[{"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/media?parent=273408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/categories?post=273408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/tags?post=273408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}