Question

我编写了JavaScript函数来添加单击功能的文本框。在这里，我需要在页面中的任何地方显示文本框。使用innerHTML在p标签中编写的文本框代码，但我需要在html中显示文本框。

＆＃13;

{{1}}

＆＃13;

Answer 1

您添加的文本框位置不正确div。只需在下方div中指定id = 'childDiv'，然后在其中输入文本框。

function add_field() {
    var total_text = document.getElementsByClassName("input_text");
    total_text = total_text.length + 1;
    document.getElementById("childDiv").innerHTML = document.getElementById("childDiv").innerHTML +
        "<p id='input_text" + total_text + "_wrapper'><input type='text' class='input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='text' class='form-control input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='button' value='Remove' onclick=remove_field('input_text" + total_text + "');></p>";
}

function remove_field(id) {
    document.getElementById(id + "_wrapper").innerHTML = "";
}

<div class="col-sm-4 col-md-4">

    <div class="row">
        <label class="control-label col-sm-12 col-md-10">&nbsp;</label>
        <div class="col-sm-4 col-md-4" id="div">
            <div id="wrapper">
                <div id="field_div">
                    <span class="glyphicon glyphicon-plus" onclick="add_field();">+</span>

                </div>
            </div>

        </div>
    </div>
</div>

<div class="col-sm-4 col-md-4">
    <div class="row">
        <div class="form-group">
            <label class="control-label col-sm-12 col-md-12">Child
             </label>
            <div id='childDiv' class="col-md-12"> I need to show text box here instead in javascript </div>
            </div>
        </div>

    </div>

Answer 2

＆＃13;

<div class="col-sm-4 col-md-4">
  <div class="row">
    <div class="form-group">
      <label class="control-label col-sm-12 col-md-12">Child
											 </label>
      <button onclick="add_field()">Add</button>
      <div class="col-md-12" id="field_div"> I need to show text box here instead in javascript </div>
    </div>
  </div>

</div>


<script>
  function add_field() {
    var total_text = document.getElementsByClassName("input_text");
    total_text = total_text.length + 1;
    document.getElementById("field_div").innerHTML = document.getElementById("field_div").innerHTML +
      "<p id='input_text" + total_text + "_wrapper'><input type='text' class='input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='text' class='form-control input_text' id='input_text" + total_text + "' placeholder='Enter Text'><input type='button' value='Remove' onclick=remove_field('input_text" + total_text + "');></p>";
  }

  function remove_field(id) {
    document.getElementById(id + "_wrapper").innerHTML = "";
  }
</script>

＆＃13;

如何在用JavaScript声明的html中显示文本框

2 个答案: