使用JavaScript來添加到現有的文本在一個文本

我需要有一個「添加功能」按鈕，將追加下面的文字到已經存在的文本在一個文本：使用JavaScript來添加到現有的文本在一個文本

<b>Features:</b> 
<ul> 
<li>Feature 1 here</li> 
<li>Feature 2 here</li> 
</ul>

它需要出現以html格式顯示，以便用戶可以看到標籤及其內容。下面是我使用的HTML：

<tr class="addItemFormDark"> 
    <td class="descriptionLabel"> 
     <p>Description:</p> 
    </td> 
    <td> 
     <textarea name="description" id="addItemDescription" cols="77" rows="6"></textarea> 
    </td> 
</tr> 
<tr class="addItemFormDark"> 
    <td colspan="2"> 
     <input type="button" onclick="addFeatures('addItemDescription')" value="Add Features"/> 
    </td> 
</tr>

...這裏是JavaScript我使用：

function addFeatures(id) { 
    var contents = document.getElementById(id).innerHTML; 
    contents += "<b>Features:</b>\r<ul>\r\t<li>Feature 1 here</li>\r\t<li>Feature 2 here</li>\r</ul>"; 
    document.getElementById(id).innerHTML = contents; 
}

現在，這裏是我遇到的麻煩的一部分。如果textarea是空的，就像它開始時那樣，所需的文本將被添加到textarea中，並且這可以重複多次，每個文本塊在最後一次被成功添加。

但是，如果用戶在框中鍵入任何內容，無論是在空白文本區域中，還是在成功添加了所需代碼塊之一後，都會完全禁用該按鈕。它將不再向textarea添加任何內容，直到頁面刷新。

如果我使用JQuery的.append方法，並給textarea和按鈕一個id，我得到了完全相同的結果。

任何人都可以幫忙嗎？

來源

2012-10-01 Marc

使用'.value'而不是.innerHTML獲取/設置一個textarea的價值。 – devnull69

innerHTML不是用於設置textarea值的正確屬性。改爲使用value。

function addFeatures(id) { 
    var textarea = document.getElementById(id); 
    textarea.value += "<b>Features:</b>\r<ul>\r\t<li>Feature 1 here</li>\r\t<li>Feature 2 here</li>\r</ul>"; 
}

來源

2012-10-01 13:03:20

這工作很好。謝謝蒂姆！ – Marc

與jQuery我這樣做：

var appendData = //the HTML text you want to add 
var currentData = $("#textboxID").val(); 
var newData = currentData+appendData; 

$("#textboxIS").val(newData);

來源

2012-10-01 13:11:15 Nw167

這是一個很好的解決方案，現在我已經實現了這個。謝謝：） – Marc

使用JavaScript來添加到現有的文本在一個文本

回答

相關問題