javascript - 使用 JS 删除 <div> 部分无法按预期工作

Question

我尝试使用以下简单代码从 DOM 中删除周围的 div 部分:

document.getElementById("1").outerHTML = document.getElementById("1").innerHTML;

<p>
    Part 1
    <div id="1">
        <span id ="2">
            Part 2
        </span>
        Part 3
    </div>
    Part 4
</p>

应用该脚本的预期输出是所有部分都在一行内。但事实并非如此。当我手动从 HTML 代码中删除 div 部分时，它们位于一行中。你知道我做错了什么吗？

谢谢，

安德烈亚斯

Answer 1

您不能将 block 级元素嵌套在 HTML 中的内联元素内。换句话说，一个div里面 p在所有 HTML 标准中都是无效的。此外，当使用符合标准的 HTML 解析器时，不可能放置 <div> <p> 内的元素在 DOM 中，因为开头 <div>标签会自动关闭<p>元素。

如果周围元素是 div，则您的代码是正确的.

<div>
    Part 1
    <div id="1">
        <span id ="2">
            Part 2
        </span>
        Part 3
    </div>
    Part 4
</div>