js给一个标签添加父标签


<!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(直接父元素), 像这样子就行了

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

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

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

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

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

javascript html jquery

阅读 4k

3 个回答

得票最新

hfhan

29k72241

发布于
2022-04-13

✓ 已被采纳

replaceChild

const insertDiv = document.createElement('div');
const demo = document.querySelector('#demo');
const parent = demo.parentElement
parent.replaceChild(insertDiv, demo)
insertDiv.append(demo)

Justin

1.4k41232

发布于
2022-04-12

<!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>