在點擊按鈕上動態創建文本框，並將其更改爲選定文本框的CSS屬性

Question

再次感謝所有偉大的思想家。

我的期望正是他們在示例網站中所擁有的。

示例站點： http://www.printvenue.com/customer-design/editor/rounded-corner-business-cards/3-0128-vc-psd

--->創建文本框動態的onclick只在畫布區域。

--->文本框輸入文本的字體，字體大小，顏色..通過獲取ID更改 var somename = document.getelementbyid（「文本框的ID - 在這種情況下id獲取唯一」）; somename =這裏所有的功能，改變顏色，字體是如下

但是，

我的問題是動態地添加文本框的onclick按鈕，所以如何assing ID爲 VAR somename =的document.getElementById（「ID文本框（動態創建的文本框ID）「）;

與此同時，文本框應該是可移動的任何在畫布上。

Answer 1

在這裏，你想要的link：

JavaScript Version:

HTML

<input id='inp' type='button' value='Click me'/> 
<div id='cont'> 

</div> 

的JavaScript

document.getElementById('inp').addEventListener('click', function() { 
     var textarea = document.createElement('textarea'); 
     textarea.className="mytextbox"; 
     document.getElementById('cont').appendChild(textarea); 
    }); 

周的CSS

.mytextbox{ 
    width:200px;height:200px;box-shadow:2px 1px 5px 1px #000; 

} 

---

jQuery Version :

HTML

<input id='inp' type='button' value='Click me'/> 
<div id='cont'> 

</div> 

的jQuery

$('input').click(function(){ 

    var textarea = $('<textarea></textarea>'); 
    textarea.css({'width':'200px','height':'200px','box-shadow':'1px 2px 5px 1px #000'}); 
    $('#cont').append(textarea); 

}); 

Answer 2

您可以創建這樣一個新的HTML元素：

var textBox = document.createElement("textarea"); 

將其添加到父用

document.getElementById([insert id of parent here]).appendChild(textBox); 

這位家長應該是DIV/HTML元素中，所有的文字區域是位於。

Example in JSFiddle

HTML

<div id='parent'> 
    <textarea>txt1</textarea> 
    <textarea>txt2</textarea> 
    <textarea>txt3</textarea> 
</div> 
<button onClick="addBox()">add textarea</button> 

JS

addBox = function(){ 
    var textBox = document.createElement("textarea"); 
    document.getElementById("parent").appendChild(textBox); 
} 

---

Example in JSFiddle with JQuery

HTML

<div id='parent'> 
    <textarea>txt1</textarea> 
    <textarea>txt2</textarea> 
    <textarea>txt3</textarea> 
</div> 
<button>add textarea</button> 

jQuery的

$(function(){ 
    $('button').on('click', function(){ 
     var textBox = document.createElement("textarea"); 
     $('#parent').append(textBox); 
    }); 
});