Javascript 如何循环遍历所有P标记，然后将它们的innerHTML写入页面末尾的文档？_Javascript_Html

Javascript 如何循环遍历所有P标记，然后将它们的innerHTML写入页面末尾的文档？

javascript html

Javascript 如何循环遍历所有P标记，然后将它们的innerHTML写入页面末尾的文档？,javascript,html,Javascript,Html,我想循环浏览网页上的所有p标记，然后将它们写到网页的末尾。我原以为这个for循环可以工作，但到目前为止，它给了我一个错误我如何做到这一点，然后将标记中的文本附加到页面末尾？ function forLoopTest() { var i; //indexing tag for looping through all of the array elements //for loop to loop through the pp array starting at index of

我想循环浏览网页上的所有p标记，然后将它们写到网页的末尾。我原以为这个for循环可以工作，但到目前为止，它给了我一个错误

我如何做到这一点，然后将标记中的文本附加到页面末尾？

function forLoopTest() {
    var i; //indexing tag for looping through all of the array elements

    //for loop to loop through the pp array starting at index of zero 
    for (i = 0; i < pp.length;i++) 
    {
       document.writeln("<br>" + pp[i].innerHTML); //write to the end of the page of each element
    }
}

函数forLoopTest（）{
var i；//用于在所有数组元素中循环的索引标记
//对于从索引为零开始的pp数组的循环到循环
对于（i=0；i”+pp[i].innerHTML）；//写入每个元素的页面末尾
}
}

HTML代码：

<!DOCTYPE html>
<html>
<body>
<div id="main">
    <p id="AA">A</p>
    <p id="BB">B</p>
    <p id="CC">C</p>
    <p id="DD">D</p>
    <p id="EE">E</p>
</div>
<p id="demo"></p>
<script>
    var x = document.getElementById("main");
    var pp = x.getElementsByTagName("p"); //creates an array of p elements
    document.getElementById("demo").innerHTML = 'The first paragraph inside "main" is ' + pp[1].innerHTML;

function forLoopTest() {
    var i;
    for (i = 0; i < pp.length;i++) {
       document.writeln("<br>" + pp[i].innerHTML;
    }
}

forLoopTest();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>
<div id="main">
<div id="main">
    <p id="AA">A</p>
    <p id="BB">B</p>
    <p id="CC">C</p>
    <p id="DD">D</p>
    <p id="EE">E</p>
</div>

<p id="demo"></p>
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
    <p id="A">A</p>
    <p id="B">B</p>
    <p id="C">C</p>
    <p id="D">D</p>
    <p id="E">E</p>
    <div>Test</div>
</div>
<p id="demo"></p>
<script>
    var x = document.getElementById("main");
    var pp = x.getElementsByTagName("p"); //creates an array of p elements
    var divTag = x.getElementsByTagName("div"); //creates an array of div elements
    document.getElementById("demo").innerHTML = 'The first paragraph inside "main" is ' + pp[1].innerHTML;

function forLoopTest() {
    var i;
    for (i = 0; i < pp.length;i++) {
       document.writeln("<br>" + pp[i].innerHTML;
    }
}

var fragment = document.createDocumentFragment();

Array.prototype.forEach.call(document.getElementsByTagName('p'), function (element) {
    Array.prototype.forEach.call(element.childNodes, function (childNode) {
        fragment.appendChild(childNode.cloneNode(true));
    });
});

document.body.appendChild(fragment);
</script>

</body>
</html>


A
B
C
D
E

var x=document.getElementById（“main”）；
var pp=x.getElementsByTagName（“p”）//创建一个p元素数组
document.getElementById（“demo”）.innerHTML='main中的第一段是'+pp[1].innerHTML；
函数forLoopTest（）{
var i；
对于（i=0；i”+pp[i].innerHTML；
}
}
forLoopTest（）；
A
B
C
D
E

这是一个段落
A
B
C
D
E
试验

var x=document.getElementById（“main”）；
var pp=x.getElementsByTagName（“p”）；//创建一个p元素数组
var divTag=x.getElementsByTagName（“div”）；//创建一个div元素数组
document.getElementById（“demo”）.innerHTML='main中的第一段是'+pp[1].innerHTML；
函数forLoopTest（）{
var i；
对于（i=0；i”+pp[i].innerHTML；
}
}
var fragment=document.createDocumentFragment（）；
Array.prototype.forEach.call（document.getElementsByTagName（'p'），函数（element）{
Array.prototype.forEach.call（element.childNodes，函数（childNode）{
appendChild（childNode.cloneNode（true））；
});
});
document.body.appendChild（片段）；

如果您阅读了错误，它会告诉您有语法问题，并且误发了

）

您没有关闭

write（）

document.writeln（“
”+pp[i].innerHTML；

应该是

document.writeln("<br>" + pp[i].innerHTML);

document.writeln（“
”+pp[i].innerHTML）；

有很多方法可以做到这一点，一个解决方案可能是

HTML

HTML后

<div id="main">
    <p id="AA">A</p>
    <p id="BB">B</p>
    <p id="CC">C</p>
    <p id="DD">D</p>
    <p id="EE">E</p>
</div>
<p id="demo"></p>
ABCDE


A
B
C
D
E

ABCDE

在

警告：（）可能导致文件中的元素ID重复文件

如果盲目复制元素的

innerHTML

，也是如此。

不要使用document.write/writeln。不要这样做

<div id="main">
    <p id="AA">A</p>
    <p id="BB">B</p>
    <p id="CC">C</p>
    <p id="DD">D</p>
    <p id="EE">E</p>
</div>
<p id="demo"></p>

var fragment = document.createDocumentFragment();

Array.prototype.forEach.call(document.getElementsByTagName('p'), function (element) {
    Array.prototype.forEach.call(element.childNodes, function (childNode) {
        fragment.appendChild(childNode.cloneNode(true));
    });
});

document.body.appendChild(fragment);

<div id="main">
    <p id="AA">A</p>
    <p id="BB">B</p>
    <p id="CC">C</p>
    <p id="DD">D</p>
    <p id="EE">E</p>
</div>
<p id="demo"></p>
ABCDE