如何在div内容顶部添加段落

Answer 1

您可以使用 prepend 将段落添加到容器顶部：

// HTML: <div><p>Lorem ipsum</p></div>
$('div').prepend('<p>Bla bla bla');

更新：关于您关于如何淡入段落的评论 - 使用 fadeIn：

$("#pcontainer").prepend($('<p>This paragraph was added by jQuery.</p>').fadeIn('slow'));

工作演示：http://jsbin.com/uneso

Answer 2

无需 jQuery 的更优雅方式：

var container = document.getElementById('pcontainer');
container.insertBefore(document.createElement("p"), container.firstChild);

这假设容器中已经有一个元素。

Answer 3

非 jQuery 用户的示例：

document.getElementById('pcontainer').innerHTML = '<p>new paragraph</p>' + document.getElementById('pcontainer').innerHTML;

也许没有那么短和漂亮:)

Answer 4

尝试使用 prepend 而不是append。

Answer 5

这是一种不使用 jQuery 的方法：

function prependParagraphs()
{
     var choosenDiv = document.getElementById("pcontainer");
     for(var i=0; i<5; i++)
     {
         var newP = document.createElement("p");
         var text = document.createTextNode("new paragraph number: " + i);
         newP.appendChild(text);
         choosenDiv.insertBefore(newP, choosenDiv.firstChild);
     }
}

Answer 6

具体到您的 HTML，它将是：

$("#pcontainer").prepend('<p>here's a new paragraph!</p>');

Answer 7

你可以使用一个小技巧。 例如，首先将新的 html 存储在变量中，然后将其与旧内容一起附加到容器中。

const container = document.getElementById("pcontainer")
container.innerHTML = `<p>new para you want to add</p> ${container.innerHTML}` 

Answer 8

不使用 jquery 的更新解决方案是使用 prepend() 方法。

function add() {
  let p = document.createElement('p')
  p.innerText = 'added before'
  document.getElementById('pcontainer').prepend(p)
}

button = document.getElementById('add')
button.addEventListener('click', add)

<button id="add">add</button>

<div id="pcontainer">
  <p>begin</p>
</div>