如何删除外部标记(<tag> </tag>)并使用jquery将其余标记附加到其父项?

时间:2016-06-25 14:12:41

标签: javascript jquery html google-chrome google-chrome-extension

这里我开发了一个chrome扩展,它选择了一个元素然后我们需要删除外部标记并将其余部分附加到同一个标记。

假设我的html结构是这样的..

<span>
<marquee behavior="scroll" direction="up" scrolldelay="75" scrollamount="1" width="450" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);" style="width: 450px;">

<table cellspacing="0" cellpadding="3" border="0" style="border-collapse: collapse" bordercolor="#000000" width="450">

<tbody>
<tr>
<td colspan="3"><b><u>Message</u></b>&nbsp;<img src="images/sir.jpg"></td>
</tr>


</tbody>
</table>
</marquee>
</span>

我所有的都选择了span元素,然后选择了marquee元素。所以我想删除marquee标签并将其追加到span标签。

最终结构应如下所示......

<span>

<table cellspacing="0" cellpadding="3" border="0" style="border-collapse: collapse" bordercolor="#000000" width="450">

<tbody>
<tr>
<td colspan="3"><b><u>Message</u></b>&nbsp;<img src="images/sir.jpg"></td>
</tr>


</tbody>
</table>
</span>

我编写的代码:

$(document).ready(function () {
    console.log("ready!");

    function getinfo() {
        message = document.getElementsByTagName('span');
        message_length =message.length -1;
        message_body = message[message_length];
        console.log(message_body);

        var child = message_body.children[0];

        console.log(child);
        //Upto here i hace selected the marquee element
        //Now remove the <marquee> tag
        //Also remove the </marquee> tag
        //Append it back to the span tag

    }

    setTimeout(getinfo, 10000);

});

2 个答案:

答案 0 :(得分:1)

可以使用unwrap()

$('marquee table').unwrap()

答案 1 :(得分:1)

您可以使用contents获取marquee代码的内容,然后用子dom替换marquess

由于您已标记此问题

 function getinfo() {
       var childDom = $("marquee").contents();
      $("marquee").replaceWith(childDom);

    }

JSFIDDLE

您还可以使用unwrap删除父元素

function getinfo() {
    var getChild = $('table');
       getChild.unwrap()
   }

JSFIDDLE with unwrap method

注意:既然你用jquery标记了它,所以使用jquery,虽然我没有在你的代码中看到jquery