Question

我不确定这是否可以通过Javascript完成，并且非常感谢任何帮助或建议。

这是一个场景：假设我有内容（所有文字），这是6段长。内容是从数据库中立即动态提取的（意味着所有6个段落都是通过一个变量输出的，所以我无法改变它）。

我需要做的是，在页面顶部显示前两个段落，然后显示其他一些内容，然后在其他内容下方显示其余段落。

所以，content = 6段

Paragraph One
Paragraph Two

SOME OTHER COOL STUFF IN BETWEEN

Paragraph Three
Paragraph ...
Paragraph Six

是否可以使用Javascript分割此内容。段落在p标签内输出。

Answer 1

如果它是一根长串，除非有一个分隔符，否则我看不到分离的方法。如果它们已经在段落标签中，您可以在第二段使用.append选择器标记所需内容后使用jQuery和:eq(1)之类的内容。

Answer 2

如果每个段落都包含在一个p标签中，那么你可以做类似这样的事情（例如，jquery显着，但只用javascript就不会太糟糕）

含量：

<div id="wrapper">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

脚本：

<script>
$('#wrapper:nth-child(2)').append("SOME OTHER COOL STUFF IN BETWEEN");
</script>

作为常规javascript

<script>
var p3 = document.getElementById('#wrapper').childNodes[2];
var text = document.createElement("p");
text.innerHTML = "SOME OTHER COOL STUFF IN BETWEEN";
p3.insertBefore(text,p3);
</script>

Answer 3

HTML

<div id="wrapper">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <div id="cool">SOME OTHER COOL STUFF IN BETWEEN</div>
</div>

jQuery

$('#wrapper > p').slice(2).appendTo('#wrapper');

CSS

#cool { font-size:20px; color:red; }

现场演示： http://jsfiddle.net/KZm5X/

Answer 4

你没有说你正在使用一个库，所以这里是如何在没有库的情况下实现它。

var p = document.getElementById('my-container').getElementsByTagName('p'),
    newDiv = document.createElement('div');

p.parentNode.insertBefore(newDiv, p[2]);

Javascript / jQuery：将内容分为两部分

4 个答案: