交换标签的功能答案

【问题标题】：function to exchange tags交换标签的功能
【发布时间】：2016-01-02 22:44:31
【问题描述】：

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

 html statements before click 

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

 html statements after click 

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

 html statements after click 

我正在尝试通过此功能达到预期的效果：

功能我的功能（）{ document.getElementById("tag1").innerHTML = "点击后的html语句&lt/p>&ltp id='tag2'>"; document.getElementById("tag2").id = "tagTmp"; document.getElementById("tag1").id = "tag2"; document.getElementById("tagTmp").id = "tag1"; } &lt/脚本>

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

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

...段落 id=tag2 仍然嵌套在段落 id=tag1 中（我希望两个段落处于同一级别）。

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

【问题讨论】：

那么，从功能上讲，您只是想在现有的段落标签之后添加另一个段落标签吗？
是的，确切地说，我想在现有的段落标签之后添加另一个段落标签

标签： javascript jquery html

【解决方案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>

【讨论】：

谢谢，看起来它可以工作，但尝试它我得到以下错误： TypeError: $originalTag.prop is not a function ... 请问有什么问题？
检查代码片段。似乎工作。我想你还有别的事情发生。 prop() 是在 1.6 中添加的，所以如果您使用的是旧版本的 jQuery，可能就是这样。在这种情况下，尝试使用 attr() 而不是 prop()
非常感谢，用 'attr()' 代替 'prop()' 就可以了。

【解决方案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>

【讨论】：

感谢您的帖子。此示例有效，但是如果文档中已经有多个段落（以 id 区分），我如何指定将哪个段落附加到新段落？
选择你需要的id而不是'p'
抱歉，但不确定如何准确修改您的示例以使其按需要工作。您能否再次发布完整的示例，其中包含两个段落的 id - 旧的和新附加的？