CSS不适用于动态创建的文本字段

Question

我为表单创建了一个动态文本字段。添加和删​​除功能都可以正常工作，但是当我应用CSS时，它将无法正常工作。 我是一个javascript的新手，真的很感激，如果你能帮我解决这个问题。这是代码：

var counter = 1;
		var limit = 3;

		function showTextBox() {
		    var newdiv = document.createElement('div');
		    //var add = 'add' + (counter - 1) ;
		    console.log(newdiv);
		    //console.log(counter);
		    var tr = document.getElementById(newdiv);
		    console.log(tr);
		    newdiv.id = 'add' + counter;
		    var sample = newdiv.id;
		    //console.log(sample);
		    //console.log(newdiv.id);
		    newdiv.innerHTML = "Option  <input type='text' >";
		    //document.getElementById("newdiv").setAttribute("style", "borderRadius: 10px; borderColor: #777; cursor: text; height: 20px;");
		    //newdiv.style.setProperty('border-radius', '10px', 'border-color', '#777', 'cursor', 'text', 'height', '20px');
		    newdiv.style.paddingBottom = "10px";
		    document.getElementById("tbhold").appendChild(newdiv);
		    counter++;
		}

		function hideTextBox() {
		    var add = 'add' + (counter - 1);
		    //console.log(counter);
		    var tr = document.getElementById(add);
		    console.log(tr);
		    tr.parentNode.removeChild(tr);
		    counter--;
		}

#option{
			font-size: 16px;
			text-align: center;
			top: 250px;
			padding-top: 50px;
		}
		#option > span{
			text-align: center;
			margin-left: 80px;
			top: 50px;
		}
		#tbhold > p > input{
			margin-left: 20px;
			border-radius: 10px;
			border-color: #777;
			cursor: text; 
			height: 20px;
		}

<div id="option">
				<span><strong>Name</strong></span>
				<div id="tbhold">
					 <p>Option  <input type="text" name="c_field" id="c_field"></p>
				 </div>
				 <a href="javascript:showTextBox()"><span>+</span></a>&emsp;&emsp;<a href="javascript:hideTextBox()"><span>-</span></a>
			</div>

Answer 1

Input未在p内生成，因此请删除p标记

的嵌套

var counter = 1;
		var limit = 3;

		function showTextBox() {
		    var newdiv = document.createElement('div');
		    //var add = 'add' + (counter - 1) ;
		    console.log(newdiv);
		    //console.log(counter);
		    var tr = document.getElementById(newdiv);
		    console.log(tr);
		    newdiv.id = 'add' + counter;
		    var sample = newdiv.id;
		    //console.log(sample);
		    //console.log(newdiv.id);
		    newdiv.innerHTML = "Option  <input type='text' >";
		    //document.getElementById("newdiv").setAttribute("style", "borderRadius: 10px; borderColor: #777; cursor: text; height: 20px;");
		    //newdiv.style.setProperty('border-radius', '10px', 'border-color', '#777', 'cursor', 'text', 'height', '20px');
		    newdiv.style.paddingBottom = "10px";
		    document.getElementById("tbhold").appendChild(newdiv);
		    counter++;
		}

		function hideTextBox() {
		    var add = 'add' + (counter - 1);
		    //console.log(counter);
		    var tr = document.getElementById(add);
		    console.log(tr);
		    tr.parentNode.removeChild(tr);
		    counter--;
		}

#option{
			font-size: 16px;
			text-align: center;
			top: 250px;
			padding-top: 50px;
		}
		#option > span{
			text-align: center;
			margin-left: 80px;
			top: 50px;
		}
		#tbhold input{
			margin-left: 20px;
			border-radius: 10px;
			border-color: #777;
			cursor: text; 
			height: 20px;
		}

<div id="option">
				<span><strong>Name</strong></span>
				<div id="tbhold">
					 <p>Option  <input type="text" name="c_field" id="c_field"></p>
				 </div>
				 <a href="javascript:showTextBox()"><span>+</span></a>&emsp;&emsp;<a href="javascript:hideTextBox()"><span>-</span></a>
			</div>

Answer 2

您的Javascript无法正常工作，因为您需要在应用样式之前首先加载div。请参阅下面的修改代码

function showTextBox() {
    var newdiv = document.createElement('div');
    var add = 'add' + (counter - 1) ;
    //console.log(newdiv);
    //console.log(counter);
    var tr = document.getElementById(newdiv);
    console.log(tr);
    newdiv.id = 'add' + counter;
    var sample = newdiv.id;

    newdiv.innerHTML = "Option  <input type='text' >";

    newdiv.style.setProperty('border-radius', '10px', 'border-color', '#777', 'cursor', 'text', 'height', '20px');
    newdiv.style.paddingBottom = "10px";
    document.getElementById("tbhold").appendChild(newdiv);
    document.getElementById(sample).setAttribute("style", "borderRadius: 10px; borderColor: #777; cursor: text; height: 20px; font-size:50px;");
    counter++;
}