请教从给定格式的HTML片断中截取固定位置的HTML内容的JS代码

PALadinWIC 2018-06-24 10:26:04

大家好，我最近遇到个问题希望有人能帮忙解答一下，是这样的，我在程序中处理一个HTML片断，有固定格式的，类似这样的：



<p attributes="这里一堆属性">xxxxx</p>

<p attributes="这里又一堆属性">

    <span id="子元素" attributes="这里还是一堆属性">

        <span id="内嵌1">sfdsfsdfdsf</span>

        <span id="内嵌2">sfdsfsdfdsf</span>

    </span>

    <span id="子元素2" attributes="这里还是一堆属性">

        <span id="内嵌3">sfdsfsdfdsf</span>

        <span id="内嵌4">sfdsfsdfdsf</span>

    </span>

</p>

类似上面这样的，就是固定的两个段落元素，第二个段落元素内有几个元素，我想单独将这第二个段落内的几个元素的HTML给单独截取出来，我的JS代码是这样的：



            var div = document.createElement("div");

            div.innerHTML = responseText;  //这个responseText就是具体的HTML片断文本

            //获取第二个段落

            var para = div.childNodes[1];

            

            var div2 = document.createElement("div");

            for (var i = 0; i < para.childNodes.length; i++) {

                div2.appendChild(para.childNodes[i]);

            }

...全文

185 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

PALadinWIC 2018-06-26

打赏
举报

尼玛的上个厕所反应过来了。



            var div = document.createElement("div");

            div.innerHTML = responseText;  //这个responseText就是具体的HTML片断文本

            //获取第二个段落

            var para = div.childNodes[1];

我直接取para.innerHTML就完了啊，我靠，我之前到底在干吗啊？

PALadinWIC 2018-06-26

打赏
举报

引用 7 楼 jslang 的回复:

[quote=引用 1 楼 PALadinWIC 的回复:]
我最初的想法是获取div2.InnerHTML就可以了。思路我感觉没啥问题，但实际运行出了状况。这个appendChild居然会导致para.childNodes.length递减，而且appendChild貌似只加入了内嵌1内嵌2这样的元素，那个子元素和子元素2并没有被加进去。这是什么原因啊？有没有人给指导一下的？
很奇怪主贴发到一定地步居然打不出来字了。

因为appendChild是移动元素，不是复制，移动走了原来的地方当然没有了
可以这样
for (;para.childNodes.length>0;) {
div2.appendChild(para.childNodes[0]);

childNodes只包含子节点，不包含孙节点

新论坛的编辑器只能输入1000个字符[/quote]

受教了，我再研究一下看看

Logerlink 2018-06-25

打赏
举报

不应该是这样吗？？？



        window.onload = function () {

			let responseText = document.getElementsByClassName('second-section')[0].innerHTML;

            let newDivEl = document.createElement("div");

			newDivEl.classList.add('third-second');

			newDivEl.innerHTML = responseText;

			document.body.appendChild(newDivEl)

        }



    <p attributes="这里一堆属性" class="first-section">xxxxx</p>

    <p attributes="这里又一堆属性" class="second-section">

        <span id="子元素" attributes="这里还是一堆属性">

            <span id="内嵌1">sfdsfsdfdsf</span>

            <span id="内嵌2">sfdsfsdfdsf</span>

        </span>

        <span id="子元素2" attributes="这里还是一堆属性">

            <span id="内嵌3">sfdsfsdfdsf</span>

            <span id="内嵌4">sfdsfsdfdsf</span>

        </span>

    </p>

天际的海浪 2018-06-25

打赏
举报

引用 1 楼 PALadinWIC 的回复:

我最初的想法是获取div2.InnerHTML就可以了。思路我感觉没啥问题，但实际运行出了状况。这个appendChild居然会导致para.childNodes.length递减，而且appendChild貌似只加入了内嵌1内嵌2这样的元素，那个子元素和子元素2并没有被加进去。这是什么原因啊？有没有人给指导一下的？
很奇怪主贴发到一定地步居然打不出来字了。

天际的海浪 2018-06-25

打赏
举报

childNodes集合中会包含空白的文本节点。而且不同浏览器中空白的文本节点的多少还不一样，不推荐使用。
获取第二个段落最好用
var para = div.getElementsByTagName("p")[1];

Logerlink 2018-06-25

打赏
举报

呃呃我上面理解错意思了再试试看看这个



            var div = document.createElement("div");

            div.innerHTML = responseText;  //这个responseText就是具体的HTML片断文本

			// var para = div.childNodes;  [p, text, p]   

            var para = div.childNodes[2];

            var div2 = document.createElement("div");

            div2.innerHTML = para.innerHTML

	    document.body.appendChild(div2)

元素中的空格被视为文本，而文本被视为节点所以你上面的div.childNodes[1]取到的其实是文本

PALadinWIC 2018-06-25

打赏
举报

引用 3 楼 Logerlink 的回复:

不应该是这样吗？？？



        window.onload = function () {

			let responseText = document.getElementsByClassName('second-section')[0].innerHTML;

            let newDivEl = document.createElement("div");

			newDivEl.classList.add('third-second');

			newDivEl.innerHTML = responseText;

			document.body.appendChild(newDivEl)

        }

我这边的HTML片断内，第二个P内的元素有可能是任何HTML片断。我这里只是做了个示例，实际上拿到的不只是会有SPAN，有可能会是别的。而且我也改不了他原来里面的属性，属性也是各个样子的。

ambit_tsai-微信 2018-06-24

打赏
举报

引用 1 楼 PALadinWIC的回复:

我最初的想法是获取div2.InnerHTML就可以了。思路我感觉没啥问题，但实际运行出了状况。这个appendChild居然会导致para.childNodes.length递减，而且appendChild貌似只加入了内嵌1内嵌2这样的元素，那个子元素和子元素2并没有被加进去。这是什么原因啊？有没有人给指导一下的？很奇怪主贴发到一定地步居然打不出来字了。

csdn好像加了字数限制

PALadinWIC 2018-06-24

打赏
举报

我最初的想法是获取div2.InnerHTML就可以了。思路我感觉没啥问题，但实际运行出了状况。这个appendChild居然会导致para.childNodes.length递减，而且appendChild貌似只加入了内嵌1内嵌2这样的元素，那个子元素和子元素2并没有被加进去。这是什么原因啊？有没有人给指导一下的？很奇怪主贴发到一定地步居然打不出来字了。