Question

我正在尝试创建其中的几个：

 <div class="form-group">
        <label class="col-sm-2 control-label" for="observation">Observation</label>
        <div class="col-sm-10">
          <textarea class="form-control" id="paragraphx" name="whatever" placeholder="test">
    test</textarea>
        </div>
 </div>

使用下面的javascript：

function addParagraph()
{
     var div1=document.createElement('div');
     var div2=document.createElement('div');
     var label=document.createElement('label');
     var text=document.createElement('textarea');

     div1.setAttribute('class','form-group');
     div2.setAttribute('class','col-sm-10');

     label.setAttribute('class','col-sm-2 control-label');
     label.setAttribute('for','paragraph');
     label.setAttribute('id','paragraph'+p);

     text.setAttribute('class','form-control');
     text.setAttribute('id','paragraph');
     text.setAttribute('name','item'+i);
     text.setAttribute('placeholder','Add another paragraph here.');

     div2.appendChild(text);
     label.appendChild(div2);
     div1.appendChild(label);

     document.getElementById('myForm').appendChild(div1);
     document.getElementById("paragraph"+p).innerHTML = "Paragraph";
     increment();
}

然而，这是唯一在HTML中呈现的东西

<div class="form-group">
   <label id="paragraph1" for="xxxxxx" class="col-sm-2 control-label">Paragraph
   </label>
</div>

我做错了什么？不应该标记为div2添加div2吗？或者我以错误的方式使用AppendChild？

***** EDIT *****

非常感谢投入，伙计们。我现在唯一的问题是在加载文本框后尝试让占位符实际加载。例如，现在它只在我单击文本框后显示占位符。

Answer 1

问题在于这一行

   document.getElementById("paragraph"+p).innerHTML = "Paragraph";

您正在销毁标签元素的html内容。试着评论它，你会看到你得到的东西！

另外，我注意到了这一行

 div2.appendChild(text);
 label.appendChild(div2);
 div1.appendChild(label);

将产生此输出

<div class="form-group">
   <label id="paragraph1" for="xxxxxx" class="col-sm-2 control-label">
      <div><textarea></textarea></div>
   </label>
</div>

我认为你要做的是

 div2.appendChild(text);
 div1.appendChild(div2);
 div1.appendChild(label);

这会产生您的预期输出。

Javascript追加子巢

1 个答案: