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

【问题标题】：CSS doesn't apply to dynamically created text fieldCSS 不适用于动态创建的文本字段
【发布时间】：2018-05-21 17:47:46
【问题描述】：

我为我的表单创建了一个动态文本字段。添加和删除功能都可以正常工作，但是当我应用 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>

【问题讨论】：

您的原始代码中是否也存在 sn-p 中的错误？还是搞错了？
发布的代码可能无法正常工作，但您的问题可能是 CSS 适用于 <input> 元素，这些元素是 <p> 标签的直接子元素，该标签是元素的直接子元素id 为“tbhold”。您的函数似乎没有尝试创建这样的结构。
我有时不明白赞成票。没有可见的错误，最重要的是，添加了一个不工作的 sn-p。
newdiv 是你创建的 div 元素，你不需要再次使用 .getElementById 获取它，你可以像 newdiv.innerHTML, newdiv.setAttribute, ... 一样直接使用它，之后你需要将其添加到 dom 以便它可以出现，例如 doument.getElementsByTagName('body')[0].appendChild(newdiv)
@Red 看到有一个编辑...

标签： javascript css dynamic

【解决方案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>

【讨论】：

【解决方案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++;
}

【讨论】：