{"id":1737,"date":"2024-11-10T13:13:58","date_gmt":"2024-11-10T05:13:58","guid":{"rendered":"https:\/\/fwq.ai\/blog\/1737\/"},"modified":"2024-11-10T13:13:58","modified_gmt":"2024-11-10T05:13:58","slug":"%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8-javascript-%e5%a4%8d%e5%88%b6%e5%b9%b6%e6%8f%92%e5%85%a5-div-%e5%85%83%e7%b4%a0%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/1737\/","title":{"rendered":"\u5982\u4f55\u4f7f\u7528 JavaScript \u590d\u5236\u5e76\u63d2\u5165 DIV \u5143\u7d20\uff1f"},"content":{"rendered":"

\"\u5982\u4f55\u4f7f\u7528<\/p>\n

javascript \u590d\u5236\u5e76\u63d2\u5165 div<\/strong><\/p>\n

\u95ee\u9898\uff1a<\/strong>\u5982\u4f55\u4f7f\u7528 javascript \u590d\u5236\u4e00\u6bb5 div \u7684\u4ee3\u7801\uff0c\u5e76\u5c06\u5176\u63d2\u5165\u5230\u53e6\u4e00\u4e2a div \u4e4b\u540e\uff1f<\/p>\n

\u7b54\u6848\uff1a<\/strong><\/p>\n

\u6b65\u9aa4\uff1a<\/strong><\/p>\n

\u7acb\u5373\u5b66\u4e60<\/span>\u201c\u201d\uff1b<\/p>\n

    \n
  1. \u83b7\u53d6\u8981\u590d\u5236\u7684 div\uff1a<\/strong>\u6839\u636e\u5176 id \u6216\u7c7b\u540d\uff0c\u4f7f\u7528 document.getelementbyid() \u6216 document.getelementsbyclassname() \u83b7\u53d6\u76ee\u6807 div \u5143\u7d20\u3002<\/li>\n
  2. \u590d\u5236 div \u7684 html\uff1a<\/strong>\u4f7f\u7528 innerhtml \u6216 outerhtml \u5c5e\u6027\u83b7\u53d6\u8981\u590d\u5236\u7684 div \u7684 html \u4ee3\u7801\u3002<\/li>\n
  3. \u521b\u5efa\u65b0 div\uff1a<\/strong>\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 div \u5143\u7d20\uff0c\u4f7f\u7528 document.createelement(“div”)\u3002<\/li>\n
  4. \u8bbe\u7f6e\u65b0\u7684 div \u7684 html \u4ee3\u7801\uff1a<\/strong>\u5c06\u6b65\u9aa4 2 \u4e2d\u83b7\u53d6\u7684 html \u4ee3\u7801\u8d4b\u503c\u7ed9\u65b0 div \u7684 innerhtml \u6216 outerhtml \u5c5e\u6027\u3002<\/li>\n
  5. \u83b7\u53d6\u76ee\u6807 div \u7684\u7236\u5143\u7d20\uff1a<\/strong>\u4f7f\u7528 parentelement \u6216 parentnode \u5c5e\u6027\u83b7\u53d6\u8981\u63d2\u5165\u65b0 div \u540e\u7684\u7236\u5143\u7d20\u3002<\/li>\n
  6. \u63d2\u5165\u65b0 div\uff1a<\/strong>\u4f7f\u7528 insertbefore() \u65b9\u6cd5\uff0c\u5c06\u65b0 div \u63d2\u5165\u5230\u76ee\u6807 div \u7684\u7236\u5143\u7d20\u4e2d\uff0c\u4ee5\u76ee\u6807 div \u4e3a\u53c2\u8003\u70b9\u3002<\/li>\n<\/ol>\n

    \u4ee3\u7801\u793a\u4f8b\uff1a<\/strong><\/p>\n

    \/\/ \u83b7\u53d6\u8981\u590d\u5236\u7684 DIV\nconst divToCopy = document.getElementById(\"my-div\");\n\n\/\/ \u590d\u5236 DIV \u7684 HTML\nconst html = divToCopy.innerHTML;\n\n\/\/ \u521b\u5efa\u65b0 DIV\nconst newDiv = document.createElement(\"div\");\n\n\/\/ \u8bbe\u7f6e\u65b0 DIV \u7684 HTML\nnewDiv.innerHTML = html;\n\n\/\/ \u83b7\u53d6\u76ee\u6807 DIV \u7684\u7236\u5143\u7d20\nconst parentElement = divToCopy.parentElement;\n\n\/\/ \u63d2\u5165\u65b0 DIV\nparentElement.insertBefore(newDiv, divToCopy.nextSibling);<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \u4ee5\u4e0a\u5c31\u662f\u5982\u4f55\u4f7f\u7528 JavaScript \u590d\u5236\u5e76\u63d2\u5165 DIV \u5143\u7d20\uff1f\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
    javascript \u590d\u5236\u5e76\u63d2\u5165 div \u95ee\u9898\uff1a\u5982\u4f55\u4f7f\u7528 javascript \u590d\u5236\u4e00\u6bb5 div \u7684\u4ee3\u7801\uff0c\u5e76\u5c06\u5176\u63d2\u5165\u5230\u53e6\u4e00\u4e2a div \u4e4b\u540e\uff1f \u7b54\u6848\uff1a \u6b65\u9aa4\uff1a \u7acb\u5373\u5b66\u4e60\u201c\u201d\uff1b \u83b7\u53d6\u8981\u590d\u5236\u7684 div\uff1a\u6839\u636e\u5176 id \u6216\u7c7b\u540d\uff0c\u4f7f\u7528 document.getelementbyid() \u6216 document.getelementsbyclassname() \u83b7\u53d6\u76ee\u6807 div \u5143\u7d20\u3002 \u590d\u5236 div \u7684 html\uff1a\u4f7f\u7528 innerhtml \u6216 outerhtml \u5c5e\u6027\u83b7\u53d6\u8981\u590d\u5236\u7684 div \u7684 html \u4ee3\u7801\u3002 \u521b\u5efa\u65b0 div\uff1a\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 div \u5143\u7d20\uff0c\u4f7f\u7528 document.createelement(“div”)\u3002 \u8bbe\u7f6e\u65b0\u7684 div \u7684 html \u4ee3\u7801\uff1a\u5c06\u6b65\u9aa4 2 \u4e2d\u83b7\u53d6\u7684 html \u4ee3\u7801\u8d4b\u503c\u7ed9\u65b0 div \u7684 innerhtml \u6216 outerhtml \u5c5e\u6027\u3002 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-1737","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/1737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=1737"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/1737\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=1737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=1737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=1737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}