如何在每个 p 后添加 hr？ 使用循环
[英]How to add hr after each p? using the loop for
问题描述
document.querySelectorAll('p').forEach((elem) => {
elem.insertAdjacentHTML('afterend', '<hr/>');
});
<article>
<h3>What is Lorem Ipsum?</h3>
<p>First</p>
<h3>Where does it come from?</h3>
<p>Second</p>
<h3>Why do we use it?</h3>
<p>Third</p>
It is not possible to modify the specified markup
无法修改指定的标记
4 个解决方案
解决方案1
0 2020-12-05 07:10:22
document.addEventListener("DOMContentLoaded", function(){ var element = document.querySelectorAll('p'); for (var i = 0; i < element.length; i++) { element[i].insertAdjacentHTML('afterend', '<hr/>'); } }); <?DOCTYPE html> <html> <head> <title>Test Page</title> </head> <body> <article> <h3>What is Lorem Ipsum?</h3> <p>First</p> <h3>Where does it come from?</h3> <p>Second</p> <h3>Why do we use it?</h3> <p>Third</p> </article> </body> </html>
解决方案2
0 2020-12-05 07:12:13
Your solution seems to work just fine.您的解决方案似乎工作得很好。 Just be wary of using the getElementsByTagName as it will select ALL p tags on the page and not just the three you have in your example.请小心使用 getElementsByTagName，因为它会 select 页面上的所有 p 标签，而不仅仅是您在示例中拥有的三个标签。
document.querySelectorAll('p').forEach((elem) => { elem.insertAdjacentHTML('afterend', '<hr/>'); });
<h3>What is Lorem Ipsum?</h3> <p>First</p> <h3>Where does it come from?</h3> <p>Second</p> <h3>Why do we use it?</h3> <p>Third</p>
解决方案3
0 已采纳 2020-12-05 07:38:42
const paragraphs = document.querySelectorAll('p'); for(let item of Array.from(paragraphs)) { const hr = document.createElement("hr"); item.appendChild(hr) }
<h3>What is Lorem Ipsum?</h3> <p>First</p> <h3>Where does it come from?</h3> <p>Second</p> <h3>Why do we use it?</h3> <p>Third</p>
解决方案4
0 2020-12-05 07:56:16
before close article tag:) and then use 2 Way:在关闭文章标签之前:) 然后使用 2 方式：
use CSS (simple & best) Show sample in jsfiddel
使用 CSS（简单和最佳）在 jsfiddel 中显示示例or use array in javascript
或在 javascript 中使用数组
Array.from(document.getElementsByTagName("p")).forEach(function(e, i) { e.append(document.createElement("hr")); });
<article> <h3>What is Lorem Ipsum?</h3> <p>First</p> <h3>Where does it come from?</h3> <p>Second</p> <h3>Why do we use it?</h3> <p>Third</p> </article>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何添加<hr>在每个新类别之后 - How to add <hr> after every new category
如何使用每个循环动态添加数据 - how to add data dynamically using for each loop
我该如何插入 <hr> 在第一个之后 <p> 要么 <br> 在某些文本的每5,000个字符之后？ - How can I insert a <hr> after the first <p> or <br> following every 5,000 characters of some text?
在每次for循环迭代之后，如何在Ionic的应用程序视图中添加数据？ - How to add data after each iteration of for loop to the app view in Ionic?
如何在Javascript循环中的每个项目之后添加html换行符？ - How to add html line break after each item in Javascript loop?
添加<hr>数组最后一项之后的标记 - Add <hr> tag after the last item of array
如何使用ajax和jquery在数据表中使用for循环为每行添加按钮 - How to add button for each row using for loop in datatables by ajax and jquery
在for循环的每次迭代之后添加延迟 - Add delay after each iteration of a for loop
循环 - 如何在每个循环中添加一个变量 - Loop - How to add onto a variable each loop
将<hr />元素添加到类中的每个元素，获取[Object object]或纯文本而不是hr元素 - Add a <hr/> element to each element in a class, getting [Object object] or plain text and not the hr element
相关标签