Question

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

 html statements before click 

...而我正在尝试编写将上段拆分为两段的函数：

 html statements after click 

...有意与 tag2 id交换 tag1 id以获得最终结果：

 html statements after click 

我试图通过这个功能达到预期的效果：


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

......但这对我来说不起作用。问题在于第一步 - innerHtml修改按预期工作方式不同，并且结果如下：

<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不包含open和close标记。您与dom节点进行交互，因此您无法像这样关闭父节点。正如您所看到的，它试图保护您单个＆lt; / p＆gt;的奇怪请求。并为它创造一个新的开放，以便配对。

如果您要使用jquery执行此操作，因为它是您的一个帖子标记，它可能类似于......

＆＃13;

    //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);

＆＃13;

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

＆＃13;

Answer 2

以下是您的示例代码

<html>

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

<script>

    var
        p = document.querySelector('p'),
        p2 = document.createElement('p');

    p2.id = 'p2';
    p2.textContent = ' p2...p2 '

    p.outerHTML += p2.outerHTML;

</script>
</html>

功能交换标签

2 个答案: