js给一个标签添加父标签

路丶那么遥远
  • 119

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="static/library/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
        <h1 id="demo-1">132</h1>
        <h1 id="demo-2">132</h1>
        <h1 id="demo-3">132</h1>
        <script type="text/javascript"></script>
    </body>
</html>


需求 : 使用js实现, 给这个h1外层加一个div(直接父元素), 像这样子就行了

image.png
图中错别字, 应该是传#demo-2, 只给#demo-2外层添加

补充一点 : 需要在不知道父元素是谁的情况下添加一个直接父元素
假设他们的嵌套结构是这样的

A-1
    B-1
        h1
    B-2
A-2

那么添加div之后, 他们的嵌套结构应该是这样

A-1
    B-1
        div
            h1
    B-2
A-2
回复
阅读 1.2k
3 个回答
✓ 已被采纳

replaceChild

const insertDiv = document.createElement('div');
const demo = document.querySelector('#demo');
const parent = demo.parentElement
parent.replaceChild(insertDiv, demo)
insertDiv.append(demo)
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div style="border: 10px solid blue;">
    <div style="border: 10px solid yellow;">
      <h1 id="demo">132</h1>
    </div>
  </div>
</body>

<script type="text/javascript">
  window.onload = () => {
    const insertDiv = document.createElement('div');
    insertDiv.style.border = "10px solid red";
    const demo = document.querySelector('#demo');
    demo.parentNode.append(insertDiv);
    insertDiv.insertAdjacentElement('afterbegin', demo)
  }
</script>

</html>
$("#demo-2").wrap("<div></div>");
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏