html - 从任何地方获取标题下方的段落

标签 html

我不知道如何获取标题后的任何特定段落。

以下是我的 HTML 文件脚本:

<!doctype html>
<html>
<head><title>SAM.com</title>
</head>
<body><h1>This is Heading</h1>
      <p>This is paragraph 1</p>

      <p>This is paragraph 2</p>

      <p>This is paragraph 3</p>
</body>
</html>

注意:我想在第一级标题之后显示第 3 段。

最佳答案

如果您正在寻找 CSS 解决方案,您可以使用带有 order 的 Flexbox 布局属性设置:

body {
  display: flex;
  flex-direction: column;
}

p {
  order: 1;
}

p:nth-child(4) {
  order: 0;
}
<h1>This is Heading</h1>

<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>


如果您正在寻找 JavaScript 解决方案,可以使用一些基本的 DOM 操作方法,例如 insertBefore()也能达到目的:

document.body.insertBefore(
  document.getElementsByTagName('p')[2],
  document.getElementsByTagName('h1')[0].nextSibling
);
<h1>This is Heading</h1>

<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>

关于html - 从任何地方获取标题下方的段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52945243/

相关文章:

javascript访问嵌套标签前的文本

html - 关闭浏览器后保存 HTML5 SessionStorage

javascript - 访问节点的最快方式

html - 我如何做一个有超过 1 种背景颜色的网站?

javascript - 叠加效果适用于 Chrome 中的 iframe 但不适用于 IE11

html - 双 block 引号在 CSS 中有什么作用?

javascript - 调用输入类型文本的函数 - Javascript/PHP

html - 我如何消除这个类似 Facebook 的加载器中的闪烁?

html - 推特 Bootstrap : Align nav-tabs to bottom of div

html - 是否应该不惜一切代价避免在 HTML 中使用表格?