Question

在添加多个元素时，我怀疑w.r.t jquery append（）行为。

如下例所示，例如：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText()
{
var text1=$("<a></a>").text("Text1.");  // Create text with jQuery
var text2=$("<a></a>").text("Text2.");  // Create text with jQuery
var text3=$("<p></p>").text("Text3.");  // Create text with jQuery
var text4=$("<p></p>").text("Text4.");  // Create text with jQuery

$("#divTest").append(text1,text2,text3,text4);      // Append new elements

}
</script>
</head>
<body>

<button onclick="appendText()">Append text</button>
<div id="divTest"></div>
</body>
</html>

输出：

Text1.Text2

Text3.

Text4.

问题

1. Why append is adding the anchor tag next to each other? 
2. Why append is  adding the "P" element one after the other?
3. Are there any specific set of elements, for which append() behavior varies?
4. What I was trying with append is to show links one after the other as below.But could'nt.

文本1。

文本2。

文本3。

文本4

注意：我已经尝试使用jquery after（）但行为与上面的append（）相同。

请指导我。

谢谢，

阿苏

Answer 1

问题1： “a”是一个内联标记，除非被强制执行，否则将出现在一行中。

问题2： “p”是一个块标签，出现在一个新行上。

问题3：我相信没有。

问题4：试试这个：

$("#divTest").append(text1, '<br>', text2, text3, text4);

Answer 2

试试这个

LIVE DEMO

1：默认情况下全部为a tag is inline elements。所以它不会占用换行符。

2：P tag default block element因此需要使用全宽并在之前和之后进行换行。

3我不这么认为。

4您可以通过将内联更改为css中的阻止来完成，例如在css a{display:block}

中

Answer 3

您需要浏览Block level代码和inline代码。 W3Schools

<div> <p> <h1>是一些块级标记。在append()上，它将占据新的一线。

而<span> <a>是inline个标签。在append()它会出现在同一条线上。

如果您需要在新行上显示<a>代码，请添加分行代码<br/>

Jquery append（）行为 - 添加几个新元素

3 个答案: