元素內部的自定義佔位符​​不顯示

Question

我正在使用JQuery動態地向表中添加新行。
我想在表格單元格內有一個佔位符，當用戶單擊輸入文本時它會消失。
我試圖讓CSS做到這一點。

這裏是JQuery的：

$("#addbutton").click(function(){ 
    $('#searchresults > tbody:last-child').append('<tr><td> <div contentEditable="true" data-text="Enter Name"></div> </td> \ 
                 <td><div contentEditable="true" data-text="Enter Description"> </div> </td> 
                </tr>') 

這裏是CSS：

<style> 
[contentEditable=true]:empty:not(:focus):before{ 
    content:attr(data-text) 
} 
</style> 

佔位符文心不是顯示出來。
有什麼建議嗎？

我更新了這個問題，以便新的行正確拼接在裏面的字符串.append('')我仍然無法讓文本出現。我在El Capitan上使用Safari。新行添加並且可編輯，但文本不存在！

行被添加並且也是可編輯的。它只是文字不可見。

Answer 1

我看到的唯一的問題是新臺詞：當你需要繼續到下一行，你需要逃避新行字符像：

var str = '11111\ 
llllllll'; 

的片段：

$(function() { 
 
    $("#addbutton").click(function() { 
 
    $('#searchresults > tbody:last-child').append('<tr><td><div contentEditable="true" data-text="Enter Name"></div></td>\ 
 
<td><div contentEditable="true" data-text="Enter Description"></div></td>\ 
 
</tr>'); 
 
    }); 
 
});

[contentEditable=true]:empty:not(:focus):before{ 
 
    content:attr(data-text) 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<button id="addbutton">addbutton</button> 
 
<table id="searchresults"> 
 
    <tbody> 
 

 
    </tbody> 
 
</table>

Answer 2

$("#addbutton").click(function(){ 
    $('#searchresults > tbody:last-child').append('<tr><td> <div contentEditable="true" data-text="Enter Name"></div> </td> \ 
                 <td><div contentEditable="true" data-text="Enter Description"></div></td> 
                </tr>') 

有一個如上所示，在<td> <div>之間的空間。有人編輯了該問題並將其刪除。

請不要隨意編輯問題。明顯增加空間在 可以搞砸了！