javascript - 交换标签的功能

Question

我在 html 代码中有以下段落:

<p id=tag1> html statements before click </p>

...我正在尝试编写将上面的段落分成两段的函数，如下所示:

<p id=tag1> html statements after click </p><p id=tag2></p>

...打算将 tag1 id 与 tag2 id 交换以获得最终结果:

<p id=tag2> html statements after click </p><p id=tag1></p>

我试图通过这个函数达到预期的结果:

    <script>    function myFunction() {        document.getElementById("tag1").innerHTML = "html statements after click </p><p id='tag2'>";        document.getElementById("tag2").id = "tagTmp";        document.getElementById("tag1").id = "tag2";        document.getElementById("tagTmp").id = "tag1";    }    </script>

... but this donesn't work to me. Problem is with the first step - innerHtml modification works different ways as expected and yealds following result:

<p id=tag1> html statements after click 
<p></p>
<p id=tag2></p>
</p>

...段落 id=tag2 仍然嵌套在段落 id=tag1 内(我希望这两个段落处于同一级别)。

有什么方法可以获取请求的功能吗？你能帮忙吗？谢谢。

Answer 1

document.getElementById("tag1").innerHTML = "html statements after click </p><p id='tag2'>";

所以这没有按您预期的方式运行的原因是因为这并没有像您想象的那样改变标记。 innerHTML 不包含打开和关闭标记。你与 dom 节点交互，所以你不能像那样关闭父节点。正如您所看到的，它试图保护您对单个

的奇怪请求，并为其创建一个新的开放，以便它配对。

如果您打算使用 jquery 执行此操作，因为这是您的帖子标签之一，那么它可能类似于...

    //get the existing element
    var $originalTag = $('#tag1');
    //update its id
    $originalTag.prop('id', 'tag2');
    //create a new one after it with the original id
    $('<p id="tag1"></p>').insertAfter($originalTag);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="tag1">An Existing Tag</p>